坐标辅助器和轨道控制器

效果

相关信息

红色那根表示 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）可以使得相机围绕目标进行轨道运动。

参考文档

官方文档 Three.js-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);