Orbit controls(轨道控制器)可以使得相机围绕目标进行轨道运动。
要使用这一功能,就像在/examples(示例)目录中的所有文件一样,
您必须在HTML中包含这个文件。
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 );
}
[example:misc_controls_orbit misc / controls / orbit ]
[page:Camera object]: (必须)将要被控制的相机。该相机不允许是其他任何对象的子级,除非该对象是场景自身。
[page:HTMLDOMElement domElement]: 用于事件监听的HTML元素。
Fires when the camera has been transformed by the controls.
Fires when an interaction was initiated.
Fires when an interaction has finished.
将其设为true,以自动围绕目标旋转。
请注意,如果它被启用,你必须在你的动画循环里调用[page:.update]()。
当[page:.autoRotate]为true时,围绕目标旋转的速度将有多快,默认值为2.0,相当于在60fps时每旋转一次需要30秒。
请注意,如果[page:.autoRotate]被启用,你必须在你的动画循环里调用[page:.update]()。
当[page:.enableDamping]设置为true的时候,阻尼惯性有多大。
请注意,要使得这一值生效,你必须在你的动画循环里调用[page:.update]()。
该 HTMLDOMElement 用于监听鼠标/触摸事件,该属性必须在构造函数中传入。在此处改变它将不会设置新的事件监听。
When set to *false*, the controls will not respond to user input. Default is *true*.
将其设置为true以启用阻尼(惯性),这将给控制器带来重量感。默认值为false。
请注意,如果该值被启用,你将必须在你的动画循环里调用[page:.update]()。
启用或禁用键盘控制。
启用或禁用摄像机平移,默认为true。
启用或禁用摄像机水平或垂直旋转。默认值为true。
请注意,可以通过将[page:.minPolarAngle polar angle]或者[page:.minAzimuthAngle azimuth angle]
的min和max设置为相同的值来禁用单个轴,
这将使得水平旋转或垂直旋转固定为所设置的值。
启用或禁用摄像机的缩放。
当使用键盘按键的时候,相机平移的速度有多快。默认值为每次按下按键时平移7像素。
这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头(方向)键。
controls.keys = {
LEFT: 37, //left arrow
UP: 38, // up arrow
RIGHT: 39, // right arrow
BOTTOM: 40 // down arrow
}
请参阅[link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode this page]来查看所有按键的代码列表。
How far you can orbit horizontally, upper limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity.
你能够将相机向外移动多少(仅适用于[page:PerspectiveCamera]),其默认值为Infinity。
你能够垂直旋转的角度的上限,范围是0到Math.PI,其默认值为Math.PI。
你能够将相机缩小多少(仅适用于[page:OrthographicCamera]),其默认值为Infinity。
How far you can orbit horizontally, lower limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity.
你能够将相机向内移动多少(仅适用于[page:PerspectiveCamera]),其默认值为0。
你能够垂直旋转的角度的下限,范围是0到Math.PI,其默认值为0。
你能够将相机放大多少(仅适用于[page:OrthographicCamera]),其默认值为0。
该对象包含由控件所使用的鼠标操作的引用。
controls.mouseButtons = {
LEFT: THREE.MOUSE.ROTATE,
MIDDLE: THREE.MOUSE.DOLLY,
RIGHT: THREE.MOUSE.PAN
}
正被控制的摄像机。
位移的速度,其默认值为1。
由[method:saveState]和[method:reset]方法在内部使用。
旋转的速度,其默认值为1。
定义当平移的时候摄像机的位置将如何移动。如果为true,摄像机将在屏幕空间内平移。 否则,摄像机将在与摄像机向上方向垂直的平面中平移。 Defines how the camera's position is translated when panning. If true, the camera pans in screen space. Otherwise, the camera pans in the plane orthogonal to the camera's up direction. Default is true for OrbitControls; false for MapControls.
由[method:saveState]和[method:reset]方法在内部使用。
控制器的焦点,[page:.object]的轨道围绕它运行。 它可以在任何时候被手动更新,以更改控制器的焦点。
This object contains references to the touch actions used by the controls.
controls.touches = {
ONE: THREE.TOUCH.ROTATE,
TWO: THREE.TOUCH.DOLLY_PAN
}
由[method:saveState]和[method:reset]方法在内部使用。
摄像机缩放的速度,其默认值为1。 Speed of zooming / dollying. Default is 1.
移除所有的事件监听。
获得当前的水平旋转,单位为弧度。
获得当前的垂直旋转,单位为弧度。
将控制器重置为上次调用[page:.saveState]时的状态,或者初始状态。
保存当前控制器的状态。这一状态可在之后由[page:.reset]所恢复。
更新控制器。必须在摄像机的变换发生任何手动改变后调用, 或如果[page:.autoRotate]或[page:.enableDamping]被设置时,在update循环里调用。
[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js examples/jsm/controls/OrbitControls.js]