OrbitControls

描述

Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。

Constructor

OrbitControls( object : Camera, domElement : HTMLDOMElement )

参数	类型	描述
`object`	`Camera`	（必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。
`domElement`	`HTMLDOMElement`	用于事件监听的HTML元素。

Events

事件名	描述
`change`	当摄像机被组件改变时触发。
`start`	初始化交互时触发。
`end`	当交互结束时触发。

属性

属性	类型	默认值	描述
`.autoRotate`	`Boolean`	`false`	设为`true`以自动围绕目标旋转。需在动画循环中调用`.update()`。
`.autoRotateSpeed`	`Float`	`2.0`	自动旋转的速度（60fps时每30秒转一圈）。需调用`.update()`。
`.dampingFactor`	`Float`	`0.05`	启用阻尼时的惯性大小。需调用`.update()`。
`.domElement`	`HTMLDOMElement`	-	用于监听事件的元素（必须在构造函数中传入）。
`.enabled`	`Boolean`	`true`	是否响应操作。
`.enableDamping`	`Boolean`	`false`	启用阻尼（惯性）效果。需调用`.update()`。
`.enablePan`	`Boolean`	`true`	是否启用平移。
`.enableRotate`	`Boolean`	`true`	是否启用旋转。
`.enableZoom`	`Boolean`	`true`	是否启用缩放。
`.keyPanSpeed`	`Float`	`7`	键盘平移速度（像素/按键）。
`.keys`	`Object`	方向键	控制平移的按键代码（默认使用四个方向键）。
`.maxAzimuthAngle`	`Float`	`Infinity`	水平旋转角度上限（弧度）。
`.maxDistance`	`Float`	`Infinity`	相机外移距离上限（仅`PerspectiveCamera`）。
`.maxPolarAngle`	`Float`	`Math.PI`	垂直旋转角度上限（0到π）。
`.maxZoom`	`Float`	`Infinity`	相机缩小上限（仅`OrthographicCamera`）。
`.minAzimuthAngle`	`Float`	`-Infinity`	水平旋转角度下限（弧度）。
`.minDistance`	`Float`	`0`	相机内移距离下限（仅`PerspectiveCamera`）。
`.minPolarAngle`	`Float`	`0`	垂直旋转角度下限（0到π）。
`.minZoom`	`Float`	`0`	相机放大下限（仅`OrthographicCamera`）。
`.mouseButtons`	`Object`	`LEFT:旋转` `MIDDLE:缩放` `RIGHT:平移`	鼠标按键功能映射。
`.object`	`Camera`	-	被控制的相机。
`.panSpeed`	`Float`	`1`	平移速度。
`.position0`	`Vector3`	-	内部状态存储（用于`.reset()`）。
`.rotateSpeed`	`Float`	`1`	旋转速度。
`.screenSpacePanning`	`Boolean`	`true`	是否在屏幕空间内平移。
`.target0`	`Vector3`	-	内部状态存储（用于`.reset()`）。
`.target`	`Vector3`	-	相机轨道围绕的目标点。
`.touches`	`Object`	`ONE:旋转` `TWO:缩放平移`	触摸操作功能映射。
`.zoom0`	`Float`	-	内部状态存储（用于`.reset()`）。
`.zoomSpeed`	`Float`	`1`	缩放速度。
`.zoomToCursor`	`Boolean`	`false`	是否缩放到光标位置。

方法

方法	参数	返回值	描述
`.dispose()`	-	`undefined`	移除所有事件监听。
`.getAzimuthalAngle()`	-	`radians`	获取当前水平旋转弧度。
`.getPolarAngle()`	-	`radians`	获取当前垂直旋转弧度。
`.getDistance()`	-	`Float`	获取相机到目标的距离。
`.listenToKeyEvents(domElement)`	`domElement: HTMLDOMElement`	`undefined`	为指定元素添加按键监听（推荐`window`）。
`.reset()`	-	`undefined`	重置到上次保存的状态或初始状态。
`.saveState()`	-	`undefined`	保存当前控制器状态。
`.stopListenToKeyEvents()`	-	`undefined`	移除按键监听。
`.update(deltaTime)`	`deltaTime: Number`（可选）	`Boolean`	更新控制器。手动改变相机变换后必须调用；若启用自动旋转.autoRotate或阻尼.enableDamping，则需在更新循环中调用。可选参数deltaTime（秒）用于使自动旋转速度不受帧率影响。

例子

typescript 复制代码

import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
const controls = new OrbitControls( camera, renderer.domElement );
//controls.update() must be called after any manual changes to the camera's transform
camera.position.set( 0, 20, 100 );
controls.update();
function animate() {
	requestAnimationFrame( animate );
	// required if controls.enableDamping or controls.autoRotate are set to true
	controls.update();
	renderer.render( scene, camera );
}