坐标辅助器和轨道控制器
效果展示
相关信息
红色那根表示 X 轴，绿色那根表示 Y 轴，蓝色那根表示 Z 轴。
可以通过鼠标操作来查看效果。
坐标辅助器（AxesHelper）
坐标辅助器（AxesHelper），用于简单模拟 3 个坐标轴的对象。
参考文档
官方文档 Three.js-AxesHelper
示例代码
// 创建长度为 4 的坐标系
const axesHelper = new THREE.AxesHelper(4);
// 向场景中添加坐标系
scene.add(axesHelper);构造函数
AxesHelper( size : Number )相关信息
size (可选)：表示代表轴的线段长度。默认为 1。
方法
设置轴颜色（setColors）
可以设置 X 轴、Y 轴、Z 轴的线段颜色。
.setColors ( xAxisColor : Color, yAxisColor : Color, zAxisColor : Color ) : this
axesHelper.setColors("rgb(255, 0, 0)", 0x00ff00, "blue");颜色支持常用表示形式：RGB，十六进制，颜色字符串
释放资源（dispose）
释放此实例分配的 GPU 相关资源。
当不需要使用 AxesHelper 实例时，可以调该方法释放资源。
.dispose () : undefined
axesHelper.dispose();轨道控制器（OrbitControls）
轨道控制器（OrbitControls）可以使得相机围绕目标进行轨道运动。
参考文档
示例代码
// OrbitControls 是一个附加组件，必须显式导入
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement);
function animate() {
requestAnimationFrame(animate);
// 更新控制器，必须在摄像机的变换发生任何手动改变后调用
controls.update();
renderer.render(scene, camera);
}构造函数
OrbitControls( object : Camera, domElement : HTMLDOMElement )相关信息
object（必须）: 将要被控制的相机（该相机不允许是其他任何对象的子级，除非该对象是场景自身）。
domElement: 用于事件监听的 HTML 元素。
属性
| 属性名 | 类型 | 描述 | 默认值 |
|---|---|---|---|
| autoRotate | Boolean | 是否自动围绕目标旋转 启用后需要在动画循环中调用 .update() | false |
| autoRotateSpeed | Float | 当 autoRotate 为 true 时，围绕目标旋转的速度 | 2.0 |
| dampingFactor | Float | 阻尼惯性的大小 | 0.05 |
| domElement | HTMLDOMElement | 用于监听鼠标/触摸事件的 HTMLDOMElement 必须在构造函数中传入 | 无 |
| enabled | Boolean | 控制器是否响应用户操作 | true |
| enableDamping | Boolean | 是否启用阻尼（惯性），给控制器带来重量感 | false |
| enablePan | Boolean | 是否启用相机平移 | true |
| enableRotate | Boolean | 是否启用相机水平或垂直旋转，可以通过将 polar angle 或 azimuth angle 的 min 和 max 设置为相同的值来禁用单个轴 | true |
| enableZoom | Boolean | 是否启用相机缩放 | true |
| keyPanSpeed | Float | 使用键盘按键时相机平移的速度 （平移单位是像素） | 7 |
| keys | Object | 用于控制相机平移的按键代码的引用默认为 4 个箭头（方向）键 | { LEFT: 'ArrowLeft', UP: 'ArrowUp', RIGHT: 'ArrowRight', BOTTOM: 'ArrowDown' } |
| maxAzimuthAngle | Float | 水平旋转的最大角度有效值范围为 [-2 * Math.PI，2 * Math.PI] | Infinity |
| maxDistance | Float | 相机向外移动的最大距离 （仅适用于 PerspectiveCamera） | Infinit |
| maxPolarAngle | Float | 垂直旋转的最大角度范围是 0 到 Math.PI | Math.PI |
| maxZoom | Float | 相机缩小的最大值 （仅适用于 OrthographicCamera） | Infinity |
| minAzimuthAngle | Float | 水平旋转的最小角度有效值范围为 [-2 * Math.PI，2 * Math.PI] | -Infinity |
| minDistance | Float | 相机向内移动的最小距离 （仅适用于 PerspectiveCamera） | 0 |
| minPolarAngle | Float | 垂直旋转的最小角度范围是 0 到 Math.PI | 0 |
| minZoom | Float | 相机放大的最小值 （仅适用于 OrthographicCamera） | 0 |
| mouseButtons | Object | 控制器使用的鼠标操作的引用 | { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN } |
| object | Camera | 正在被控制的摄像机 | 无 |
| panSpeed | Float | 位移速度 | 1 |
| position0 | Vector3 | 由.saveState 和.reset 方法在内部使用 | 无 |
| rotateSpeed | Float | 旋转速度 | 1 |
| screenSpacePanning | Boolean | 定义平移时摄像机位置的移动方式 | true |
| target0 | Vector3 | 由.saveState 和.reset 方法在内部使用 | 无 |
| target | Vector3 | 控制器的焦点 | new Vector3(0, 0, 0) |
| touches | Object | 控制器使用的触摸操作的引用 | { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN } |
| zoom0 | Float | 由.saveState 和.reset 方法在内部使用 | 无 |
| zoomSpeed | Float | 缩放速度 | 1 |
方法
释放资源（dispose）
释放所有事件监听。
.dispose () : undefined
controls.dispose();获取水平旋转角度（getAzimuthalAngle）
获取当前水平旋转的角度，以弧度为单位。
.getAzimuthalAngle () : radians
const azimuthalAngle = controls.getAzimuthalAngle();获取垂直旋转角度（getPolarAngle）
获取当前垂直旋转的角度，以弧度为单位。
.getPolarAngle () : radians
const polarAngle = controls.getPolarAngle();获取到目标的距离（getDistance）
获取摄像机到目标的距离。
.getDistance () : Float
const distance = controls.getDistance();监听按键事件（listenToKeyEvents）
为指定的 DOM 元素添加按键监听。
推荐将 window 作为指定的 DOM 元素。
.listenToKeyEvents ( domElement : HTMLDOMElement ) : undefined
controls.listenToKeyEvents(window);重置控制器状态（reset）
将控制器重置为上次保存的状态，或者初始状态。
.reset () : undefined
controls.reset();保存当前状态（saveState）
保存当前控制器的状态，以便之后恢复。
.saveState () : undefined
controls.saveState();停止监听按键事件（stopListenToKeyEvents）
移除之前通过 listenToKeyEvents() 定义的按键事件监听器。
.stopListenToKeyEvents () : undefined
controls.stopListenToKeyEvents();更新控制器状态（update）
在摄像机的变换发生任何手动改变后调用此方法，或者在启用了自动旋转或阻尼时，在更新循环中调用。
.update ( deltaTime : Number ) : Boolean
const isUpdated = controls.update(deltaTime);