工信部怎么查网站备案,我们做网站 出教材 办育心经,企业手机网站建设方案,品牌设计公司简介Three.js入门篇 一、Three.js和webGL的介绍二、开发和学习环境三、 三个基本概念1. 场景Scene2. 相机Camera3. 渲染器Renderer 四、三维坐标系五、材质Material六、光源1. 点光源2. 环境光3. 平行光: 七、常见几何体八、渲染器-设置设备像素比九、渲染器-锯齿属性 一、Three.js… Three.js入门篇 一、Three.js和webGL的介绍二、开发和学习环境三、 三个基本概念1. 场景Scene2. 相机Camera3. 渲染器Renderer 四、三维坐标系五、材质Material六、光源1. 点光源2. 环境光3. 平行光: 七、常见几何体八、渲染器-设置设备像素比九、渲染器-锯齿属性 一、Three.js和webGL的介绍
Three.js
是一款基于原生WebGL封装的Web 3D库向外提供了许多的接口。 它可以运用在在小游戏、产品展示、物联网、数字孪生、智慧城市园区、机械、建筑、全景看房、GIS等各个领域。
WebGL
WebGLWeb 图形库是一个 JavaScript API可在任何兼容的 Web 浏览器中渲染高性能的交互式 3D 和 2D 图形而无需使用插件。WebGL 通过引入一个与 OpenGL ES 2.0 非常一致的 API 来做到这一点该 API 可以在 HTML5 元素中使用。原生WebGL和图形学是Three.js的底层知识。
二、开发和学习环境 开发环境项目开发引入threejs比如vue或react脚手架引入threejs。 安装threejs是一个js库直接通过npm命令行安装。 npm安装特定版本three.js(注意使用哪个版本查文档就查对应版本) // 比如安装148版本
npm install three0.148.0 --save引入three.js // 引入three.js
import * as THREE from three;引入其他拓展库 除了three.js核心库以外在threejs文件包中examples/jsm目录下你还可以看到各种不同功能的扩展库。 需要用到哪一个扩展库再局部引入。 // 引入扩展库OrbitControls.js
import { OrbitControls } from three/addons/controls/OrbitControls.js;
// 引入扩展库GLTFLoader.js
import { GLTFLoader } from three/addons/loaders/GLTFLoader.js;注 新版本路径addons替换了examples/jsm // 引入旧版本拓展库
import { OrbitControls } from three/examples/jsm/controls/OrbitControls.js;学习环境入门threejs阶段.html文件中直接引入threejs。再使用vscode的Live Sever插件去创建一个本地服务器。 script标签方式引入three.js three.js库可以去hreejs官方文件包下面的build目录下载。 Three.js 的 github地址 //在head中引入js文件
script src./build/three.js/script//随便输入一个API测试下是否已经正常引入three.js
console.log(THREE.Scene); typeimportmap配置路径 官网写法 script typeimportmap{imports: {three: ./build/three.module.js//文件从官网下载}}
/scriptscript typemoduleimport * as THREE from three;// 浏览器控制台测试是否引入成功console.log(THREE.Scene);
/script**type“importmap”**配置扩展库引入
三、 三个基本概念 1. 场景Scene 三维场景用来模拟生活中的真实三维场景。新建好的几何体、光源、相机等都需要添加到场景中才会显示。 物体形状几何体·Geometry 物体外观材质Material 物体网格模型Mesh虚拟物体 模型位置.position 将模型添加到三维场景scene中.add()方法 // 创建3D场景对象Scene
const scene new THREE.Scene();// 创建一个长宽高为10的长方体几何对象Geometry
const geometry new THREE.BoxGeometry( 10, 10, 10 );// 创建一个材质对象Material,并设置材质颜色
const material new THREE.MeshBasicMaterial( { color: 0xffff00 } );// 创建网格模型Mesh可以将它看成一个虚拟物体
const mesh new THREE.Mesh( geometry, material );// 设置网格模型在三维空间中的位置坐标默认是坐标原点
mesh.position.set(0,10,0);
// 将模型添加到场景中
scene.add( mesh );2. 相机Camera
相机的作用是拍摄你的画面。
Three,js中有两种相机 正交投影相机OrthographicCamera 这种投影模式下无论物体距离相机距离远或者近在最终渲染的图片中物体的大小都保持不变。常用于渲染2D场景或者UI元素 透视投影相机PerspectiveCamera 近大远小模拟人眼所看到场景。它是3D场景的渲染中用得最普遍的投影模式。 透视投影相机PerspectiveCamera视锥体 相机距离物体的位置.position 相机镜头对准哪个物体坐标.lookAt() // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
const width 800; //宽度
const height 500; //高度
// 45:视场角度, width / height:Canvas画布宽高比, 1:近裁截面, 3000远裁截面
const camera new THREE.PerspectiveCamera(45, width / height, 1, 3000);//相机在Three.js三维坐标系中的位置
camera.position.set(200, 200, 200); //相机观察目标指向Threejs 3D空间中某个位置
camera.lookAt(0, 0, 0); //1. 坐标原点
camera.lookAt(mesh.position);//2. 指向mesh对应的位置3. 渲染器Renderer
用相机拍摄好后画面后还需要用渲染器显示到浏览器上。 快速查找渲染器的方法 WebGL渲染器WebGLRenderer 设置Canvas画布尺寸.setSize() 设置背景颜色 .setClearColor() 渲染器渲染方法.render() 获取画布元素.domElement // 创建渲染器对象
const renderer new THREE.WebGLRenderer();
const width 800; //宽度
const height 500; //高度
renderer.setSize(width, height); //设置画布渲染区域的尺寸(像素px)
renderer.render(scene, camera); //执行渲染操作// 将画布插入到HTML元素中
document.getElementById(demo).appendChild(renderer.domElement);div iddemo /div四、三维坐标系
设置辅助坐标系可以更好地在空间中观察物体。
const axesHelper new THREE.AxesHelper(10)//设置坐标轴线段尺寸
scene.add(axesHelper);如果想看到坐标轴原点可以将材质为半透明
const material new THREE.MeshBasicMaterial({color: 0x0000ff, //设置材质颜色transparent:true,//开启透明opacity:0.5,//设置透明度
});注three.js坐标轴颜色红x、绿y、蓝z对于three.js的3D坐标系默认y轴朝上。 ❓为什么y轴朝上 因为在在Three.js 中空间是基于右手笛卡尔坐标系展示的。
五、材质Material
MeshBasicMaterial材质不受光源影响场景中不添加光源也可以看见。
如果使用其他材质时页面不显示模型就要检查是不是光源忘记添加了~
基础网格材质MeshBasicMaterial不受光
漫反射网格材质MeshLambertMaterial
高光镜面网格材质MeshPhongMaterial
标准网格材质MeshStandardMaterial 最真实 基于物理的渲染PBR最近已成为许多3D应用程序的标准例如Unity Unreal和 3D Studio Max。 物理网格材质: MeshPhysicalMaterial 六、光源
1. 点光源
从一个点向各个方向发射的光源类似一个灯泡发出的光。
设置点光源PointLight // 【设置光源】(参数1: 颜色, 参数2: 光源强度, 参数3: 光源距离, 参数4: 光源范围)const pointLight new THREE.PointLight(0xffffff, 1, 0, 0);点光源辅助观察器PointLightHelper const pointLightHelper new THREE.PointLightHelper(pointLight, 5);scene.add(pointLightHelper);2. 环境光
环境光会均匀的照亮场景中的所有物体因为它没有方向所以不能用来投射阴影。
设置环境光AmbientLight const ambient new THREE.AmbientLight(0xffffff, 0.4);scene.add(ambient);3. 平行光:
平行光是沿着特定方向发射的光常常用平行光来模拟太阳光的效果。
设置平行光DirectionalLight const directionalLight new THREE.DirectionalLight(0xffffff, 1);// 设置光源的方向通过光源position属性和目标指向对象的position属性计算directionalLight.position.set(80, 100, 50);directionalLight.intensity 0.5;// 设置光源强度平行光源辅助观察器DirectionalLightHelper const dirLightHelper new THREE.DirectionalLightHelper(directionalLight, 1, 0xff0000);//参数1光源参数2长度参数3颜色scene.add(dirLightHelper);七、常见几何体 八、渲染器-设置设备像素比
如果遇到canvas画布输出模糊问题需要按着你屏幕设备的像素比去设置。
为了适应不同的硬件设备屏幕通常需要执行setPixelRatio该方法。 console.log(查看当前屏幕设备像素比,window.devicePixelRatio)renderer.setPixelRatio(window.devicePixelRatio);九、渲染器-锯齿属性
为什么要在渲染时设置锯齿属性?
在 Three.js 中渲染器负责将场景和相机转换为实际图像。为了获得更好的图像质量和减少图像锯齿。
什么是图像锯齿呢 图片锯齿全称叫图像折叠失真是指在图片的画面轮廓边缘出现不平滑的棱角。 出现这种情况说明画面的分辨率不够或太大而画面拥挤或者是3D游戏时显卡没启用抗锯齿功能 (抗锯齿标准翻译为抗图像折叠失真) 抗锯齿Antialiasing就是指对图像边缘进行柔化处理使图像边缘看起来更平滑真实
Three.js 中提供了多种抗锯齿选项例如antialias: true自动抗锯齿和 antialias: 0.5抗锯齿强度为 0.5。
// 设置自动抗锯齿
// 方式一
const renderer new THREE.WebGLRenderer({antialias:true,
});
// 方式二
renderer.antialias true注以上引用图来自Three.js中文网借鉴学习加入自己理解整理而得的学习笔记。
✨ 一些有用的网址 three.js官方中文文档 Three.js中文网 github链接查看所有版本threejs
