Three.js 基础入门：坐标辅助器（AxesHelper）与轨道控制器（OrbitControls）

摘要

本文介绍了 Three.js 中两个基础辅助工具：坐标辅助器（AxesHelper）用于直观显示三维空间中的红绿蓝三轴方向，通过传入长度参数可控制轴线延伸范围，但若相机恰好位于某轴线上则可能导致该轴被遮挡，需调整相机位置以完整观察；轨道控制器（OrbitControls）则赋予用户鼠标拖拽旋转视角和滚轮缩放的能力，启用阻尼惯性（enableDamping）后需在动画循环中每帧调用 update() 才能实现平滑减速效果，此外还可通过 dampingFactor 等属性调节惯性强度，更多配置可参考官方文档。

[一. 坐标辅助器---AxesHelper](#一. 坐标辅助器—AxesHelper)

[1. 编写代码，添加坐标辅助器](#1. 编写代码，添加坐标辅助器)

[2. 思考：为什么只有两条线，第三条呢？](#2. 思考：为什么只有两条线，第三条呢？)

[二. 轨道控制器---OrbitControls](#二. 轨道控制器—OrbitControls)

[1. 导入轨道控制器](#1. 导入轨道控制器)

[2. 添加轨道控制器](#2. 添加轨道控制器)

先看一下效果

[3. 添加阻尼惯性效果](#3. 添加阻尼惯性效果)

再次查看效果

一. 坐标辅助器---AxesHelper

单词拆解：AxesHelper

Axes （读作 /ˈæksiːz/）：这是 Axis（轴）的复数形式。就是数学里说的 X轴、Y轴、Z轴。

Helper （读作 /ˈhelpər/）：助手、辅助工具。

👉 连起来直译就是："轴的辅助工具"。 它的工作就是"画三条线给你看"，帮你确认"上下左右前后"的方向。

1. 编写代码，添加坐标辅助器

javascript 复制代码

//添加世界坐标辅助器
const axesHelper = new THREE.AxesHelper(5);//5：从原点，向x,y,z轴三个方向分别伸出5个单位长度
//添加到场景中
scene.add(axesHelper);//将坐标辅助器添加到场景，我们就能在页面场景中看到了

运行项目，查看效果：

2. 思考：为什么只有两条线，第三条呢？

通过代码可以看出，因为此时相机在(0,0,5)这个位置，即Z轴上的+5处。且相机的视角看向的是原点，所以自然看不到Z轴，因为相机就在Z轴上。

那我们可以调整一下相机的位置，就能看到三个坐标轴的辅助线了。

javascript 复制代码

//设置相机位置
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

单词拆解：OrbitControls

Orbit （读作 /ˈɔːrbɪt/）：轨道、沿轨道运行。比如地球绕着太阳转的那个"圆形轨迹"。

Controls （读作 /kənˈtroʊlz/）：控制器、操控器。

👉 连起来直译就是："轨道式操控器"。 它的意思是：让你的相机像卫星一样，沿着一个隐形的球面"轨道"绕着目标（原点）旋转。

1. 导入轨道控制器

javascript 复制代码

//导入轨道控制器
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls.js"

2. 添加轨道控制器

javascript 复制代码

//添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);//将相机、渲染器传入

先看一下效果

此时我们可以

长按左键拖拽鼠标，就能移动相机的位置
滑动滚轮，就可以让相机远离、靠近

3. 添加阻尼惯性效果

javascript 复制代码

//设置阻尼惯性
controls.enableDamping = true;

再次查看效果

可见此时，滑动物体以后，它不会立刻停止，而是有一个惯性的效果，慢慢停止。

当然，我们还可以给控制器设置很多其他属性，如下。

如果感兴趣，可以自行去官网的文档去搜索相关内容，还是比较有意思的。