总字数 1.1k
预计阅读时间 4 分钟
Three.js是基于原生WebGL封装运行的三维引擎,在所有WebGL引擎中,Three.js是国内文资料最多、使用最广泛的三维引擎。
页面结构
1 |
|
在脚手架项目当中
也可以使用npm install three
来添加依赖
Hello World
index.js
1 | (function(){ |
添加到场景中的几何体默认位于场景的坐标原点(0, 0, 0)
添加多个几何体
1 | // 圆柱网格模型 |
为防止几何体重叠无法看到, 可以调整网格的位置
循环渲染
上面的代码, 已经可以显示出一个立方体
如果要让它有一个动画效果
需要改变网格的旋转
并且进行循环渲染
1 | // 循环渲染 |
requestAnimationFrame
主要的好处是当前页面隐藏时不会进行渲染
如果是使用定时器
那么它在后台也会一直执行, 占用的资源比较多
其次是它执行的频率由屏幕刷新率决定, 效果可以更加流畅
场景控制
要使用鼠标或键盘控制三维场景, 可以使用OrbitControls
控件
首先引入它
1 | <script src="./js/lib/OrbitControls.js"></script> |
调用方式
1 | // 创建控件对象 |
场景操作
- 缩放:滚动—鼠标中键
- 旋转:拖动—鼠标左键
- 平移:拖动—鼠标右键
如果代码中通过
requestAnimationFrame
实现渲染器渲染方法render
的周期性调用,当通过OrbitControls操作改变相机状态的时候,没必要在通过controls.addEventListener('change', render)
监听鼠标事件调用渲染函数,因为requestAnimationFrame
就会不停的调用渲染函数。
辅助坐标系
为了方便调试预览threejs提供了一个辅助三维坐标系AxesHelper
1 | // 辅助坐标系 参数代表轴的线段长度,可以根据场景大小去设置 |
红色代表 X 轴, 绿色代表 Y 轴, 蓝色代表 Z 轴
材质与光源
除了基本的材质类型之外, three还提供了多种材质效果
材质类型 | 功能 |
---|---|
MeshBasicMaterial | 基础网格材质,不受光照影响的材质 |
MeshLambertMaterial | Lambert网格材质,与光照有反应,漫反射 |
MeshPhongMaterial | 高光Phong材质,与光照有反应 |
MeshStandardMaterial | PBR物理材质,相比较高光Phong材质可以更好的模拟金属、玻璃等效果 |
1 | // 创建一个球体 |
MeshLambertMaterial
和MeshPhongMaterial
都是对光照有反应的
但是此时我们还需要添加一个光源, 才能看到效果
1 | // 点光源 |