three.js OrbitControls

Orbit controls（軌道控制器）可以使得相機(jī)圍繞目標(biāo)進(jìn)行軌道運(yùn)動(dòng)。要使用這一功能，就像在/examples（示例）目錄中的所有文件一樣， 您必須在HTML中包含這個(gè)文件。

代碼示例

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 );

}

例子

misc / controls / orbit

構(gòu)造函數(shù)

OrbitControls( object : Camera, domElement : HTMLDOMElement )

object: （必須）將要被控制的相機(jī)。該相機(jī)不允許是其他任何對(duì)象的子級(jí)，除非該對(duì)象是場(chǎng)景自身。
domElement: 用于事件監(jiān)聽(tīng)的HTML元素。

事件

change

當(dāng)相機(jī)已被控件轉(zhuǎn)換時(shí)觸發(fā)。

start

當(dāng)交互開(kāi)始時(shí)觸發(fā)。

end

當(dāng)交互完成時(shí)觸發(fā)。

屬性

.autoRotate : Boolean

將其設(shè)為true，以自動(dòng)圍繞目標(biāo)旋轉(zhuǎn)。
請(qǐng)注意，如果它被啟用，你必須在你的動(dòng)畫(huà)循環(huán)里調(diào)用.update()。

.autoRotateSpeed : Float

當(dāng).autoRotate為true時(shí)，圍繞目標(biāo)旋轉(zhuǎn)的速度將有多快，默認(rèn)值為2.0，相當(dāng)于在60fps時(shí)每旋轉(zhuǎn)一周需要30秒。
請(qǐng)注意，如果.autoRotate被啟用，你必須在你的動(dòng)畫(huà)循環(huán)里調(diào)用.update()。

.dampingFactor : Float

當(dāng).enableDamping設(shè)置為true的時(shí)候，阻尼慣性有多大。 默認(rèn)值為 0.05。

請(qǐng)注意，要使得這一值生效，你必須在你的動(dòng)畫(huà)循環(huán)里調(diào)用.update()。

.domElement : HTMLDOMElement

該 HTMLDOMElement 用于監(jiān)聽(tīng)鼠標(biāo)/觸摸事件，該屬性必須在構(gòu)造函數(shù)中傳入。在此處改變它將不會(huì)設(shè)置新的事件監(jiān)聽(tīng)。

.enabled : Boolean

當(dāng)設(shè)置為false時(shí)，控制器將不會(huì)響應(yīng)用戶的操作。默認(rèn)值為true。

.enableDamping : Boolean

將其設(shè)置為true以啟用阻尼（慣性），這將給控制器帶來(lái)重量感。默認(rèn)值為false。
請(qǐng)注意，如果該值被啟用，你將必須在你的動(dòng)畫(huà)循環(huán)里調(diào)用.update()。

.enablePan : Boolean

啟用或禁用攝像機(jī)平移，默認(rèn)為true。

.enableRotate : Boolean

啟用或禁用攝像機(jī)水平或垂直旋轉(zhuǎn)。默認(rèn)值為true。

請(qǐng)注意，可以通過(guò)將polar angle或者azimuth angle 的min和max設(shè)置為相同的值來(lái)禁用單個(gè)軸， 這將使得水平旋轉(zhuǎn)或垂直旋轉(zhuǎn)固定為所設(shè)置的值。

.enableZoom : Boolean

啟用或禁用攝像機(jī)的縮放。

.keyPanSpeed : Float

當(dāng)使用鍵盤(pán)按鍵的時(shí)候，相機(jī)平移的速度有多快。默認(rèn)值為每次按下按鍵時(shí)平移7像素。

.keys : Object

這一對(duì)象包含了用于控制相機(jī)平移的按鍵代碼的引用。默認(rèn)值為4個(gè)箭頭（方向）鍵。

controls.keys = {
	LEFT: 'ArrowLeft', //left arrow
	UP: 'ArrowUp', // up arrow
	RIGHT: 'ArrowRight', // right arrow
	BOTTOM: 'ArrowDown' // down arrow
}

.maxAzimuthAngle : Float

你能夠水平旋轉(zhuǎn)的角度上限。如果設(shè)置，其有效值范圍為[-2 * Math.PI，2 * Math.PI]，且旋轉(zhuǎn)角度的上限和下限差值小于2 * Math.PI。默認(rèn)值為無(wú)窮大。

.maxDistance : Float

你能夠?qū)⑾鄼C(jī)向外移動(dòng)多少（僅適用于PerspectiveCamera），其默認(rèn)值為Infinity。

.maxPolarAngle : Float

你能夠垂直旋轉(zhuǎn)的角度的上限，范圍是0到Math.PI，其默認(rèn)值為Math.PI。

.maxZoom : Float

你能夠?qū)⑾鄼C(jī)縮小多少（僅適用于OrthographicCamera），其默認(rèn)值為Infinity。

.minAzimuthAngle : Float

你能夠水平旋轉(zhuǎn)的角度下限。如果設(shè)置，其有效值范圍為[-2 * Math.PI，2 * Math.PI]，且旋轉(zhuǎn)角度的上限和下限差值小于2 * Math.PI。默認(rèn)值為無(wú)窮大。

.minDistance : Float

你能夠?qū)⑾鄼C(jī)向內(nèi)移動(dòng)多少（僅適用于PerspectiveCamera），其默認(rèn)值為0。

.minPolarAngle : Float

你能夠垂直旋轉(zhuǎn)的角度的下限，范圍是0到Math.PI，其默認(rèn)值為0。

.minZoom : Float

你能夠?qū)⑾鄼C(jī)放大多少（僅適用于OrthographicCamera），其默認(rèn)值為0。

.mouseButtons : Object

該對(duì)象包含由控件所使用的鼠標(biāo)操作的引用。

controls.mouseButtons = {
	LEFT: THREE.MOUSE.ROTATE,
	MIDDLE: THREE.MOUSE.DOLLY,
	RIGHT: THREE.MOUSE.PAN
}

.object : Camera

正被控制的攝像機(jī)。

.panSpeed : Float

位移的速度，其默認(rèn)值為1。

.position0 : Vector3

由.saveState和.reset方法在內(nèi)部使用。

.rotateSpeed : Float

旋轉(zhuǎn)的速度，其默認(rèn)值為1。

.screenSpacePanning : Boolean

定義當(dāng)平移的時(shí)候攝像機(jī)的位置將如何移動(dòng)。如果為true，攝像機(jī)將在屏幕空間內(nèi)平移。 否則，攝像機(jī)將在與攝像機(jī)向上方向垂直的平面中平移。當(dāng)使用 OrbitControls 時(shí)， 默認(rèn)值為true；當(dāng)使用 MapControls 時(shí)，默認(rèn)值為false。

.target0 : Vector3

由.saveState和.reset方法在內(nèi)部使用。

.target : Vector3

控制器的焦點(diǎn)，.object的軌道圍繞它運(yùn)行。 它可以在任何時(shí)候被手動(dòng)更新，以更改控制器的焦點(diǎn)。

.touches : Object

該對(duì)象包含由控件所使用的觸摸操作的引用。

controls.touches = {
	ONE: THREE.TOUCH.ROTATE,
	TWO: THREE.TOUCH.DOLLY_PAN
}

.zoom0 : Float

由.saveState和.reset方法在內(nèi)部使用。

.zoomSpeed : Float

攝像機(jī)縮放的速度，其默認(rèn)值為1。

方法

.dispose () : undefined

移除所有的事件監(jiān)聽(tīng)。

.getAzimuthalAngle () : radians

獲得當(dāng)前的水平旋轉(zhuǎn)，單位為弧度。

.getPolarAngle () : radians

獲得當(dāng)前的垂直旋轉(zhuǎn)，單位為弧度。

.getDistance () : Float

返回從相機(jī)到目標(biāo)的距離。

.listenToKeyEvents ( domElement : HTMLDOMElement ) : undefined

為指定的DOM元素添加按鍵監(jiān)聽(tīng)。推薦將window作為指定的DOM元素。

.reset () : undefined

將控制器重置為上次調(diào)用.saveState時(shí)的狀態(tài)，或者初始狀態(tài)。

.saveState () : undefined

保存當(dāng)前控制器的狀態(tài)。這一狀態(tài)可在之后由.reset所恢復(fù)。

.update () : Boolean

更新控制器。必須在攝像機(jī)的變換發(fā)生任何手動(dòng)改變后調(diào)用， 或如果.autoRotate或.enableDamping被設(shè)置時(shí)，在update循環(huán)里調(diào)用。

源代碼

examples/jsm/controls/OrbitControls.js