摘要本文介绍了 Three.js 中两个基础辅助工具坐标辅助器AxesHelper用于直观显示三维空间中的红绿蓝三轴方向通过传入长度参数可控制轴线延伸范围但若相机恰好位于某轴线上则可能导致该轴被遮挡需调整相机位置以完整观察轨道控制器OrbitControls则赋予用户鼠标拖拽旋转视角和滚轮缩放的能力启用阻尼惯性enableDamping后需在动画循环中每帧调用 update() 才能实现平滑减速效果此外还可通过 dampingFactor 等属性调节惯性强度更多配置可参考官方文档。目录一. 坐标辅助器—AxesHelper1. 编写代码添加坐标辅助器2. 思考为什么只有两条线第三条呢二. 轨道控制器—OrbitControls1. 导入轨道控制器2. 添加轨道控制器先看一下效果3. 添加阻尼惯性效果再次查看效果一. 坐标辅助器—AxesHelper单词拆解AxesHelperAxes读作 /ˈæksiːz/这是Axis轴的复数形式。就是数学里说的 X轴、Y轴、Z轴。Helper读作 /ˈhelpər/助手、辅助工具。连起来直译就是“轴的辅助工具”。它的工作就是“画三条线给你看”帮你确认“上下左右前后”的方向。1. 编写代码添加坐标辅助器//添加世界坐标辅助器 const axesHelper new THREE.AxesHelper(5);//5从原点向x,y,z轴三个方向分别伸出5个单位长度 //添加到场景中 scene.add(axesHelper);//将坐标辅助器添加到场景我们就能在页面场景中看到了运行项目查看效果2. 思考为什么只有两条线第三条呢通过代码可以看出因为此时相机在(0,0,5)这个位置即Z轴上的5处。且相机的视角看向的是原点所以自然看不到Z轴因为相机就在Z轴上。那我们可以调整一下相机的位置就能看到三个坐标轴的辅助线了。//设置相机位置 camera.position.z 5;//设置相机在Z轴上的位置为5即相机沿Z轴正方向屏幕外移动5个单位 camera.position.y 2;//设置相机在Y轴上的位置为2即相机沿Y轴正方向向上移动2个单位 camera.position.x 2;//设置相机在X轴上的位置为2即相机沿X轴正方向右侧移动2个单位 camera.lookAt(0, 0, 0);//看向坐标系原点运行项目查看效果二. 轨道控制器—OrbitControls单词拆解OrbitControlsOrbit读作 /ˈɔːrbɪt/轨道、沿轨道运行。比如地球绕着太阳转的那个“圆形轨迹”。Controls读作 /kənˈtroʊlz/控制器、操控器。连起来直译就是“轨道式操控器”。它的意思是让你的相机像卫星一样沿着一个隐形的球面“轨道”绕着目标原点旋转。1. 导入轨道控制器//导入轨道控制器 import {OrbitControls} from three/examples/jsm/controls/OrbitControls.js2. 添加轨道控制器//添加轨道控制器 const controls new OrbitControls(camera, renderer.domElement);//将相机、渲染器传入先看一下效果此时我们可以长按左键拖拽鼠标就能移动相机的位置滑动滚轮就可以让相机远离、靠近3. 添加阻尼惯性效果//设置阻尼惯性 controls.enableDamping true;再次查看效果可见此时滑动物体以后它不会立刻停止而是有一个惯性的效果慢慢停止。当然我们还可以给控制器设置很多其他属性如下。如果感兴趣可以自行去官网的文档去搜索相关内容还是比较有意思的。