坐标辅助器和轨道控制器
坐标辅助器和轨道控制器
效果
相关信息
红色那根表示 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);