javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
							<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<base href="../../../" />
		<script src="page.js"></script>
		<link type="text/css" rel="stylesheet" href="page.css" />
	</head>
	<body>
		<h1>轨道控制器（[name]）</h1>

		<p class="desc">
		Orbit controls（轨道控制器）可以使得相机围绕目标进行轨道运动。<br>

		要使用这一功能，就像在/examples（示例）目录中的所有文件一样，
		您必须在HTML中包含这个文件。

		</p>

		<h2>代码示例</h2>

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

		}
		</code>

		<h2>例子</h2>

		<p>[example:misc_controls_orbit misc / controls / orbit ]</p>

		<h2>Constructor</h2>

		<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
		<p>
			[page:Camera object]: （必须）将要被控制的相机。该相机不允许是其他任何对象的子级，除非该对象是场景自身。<br><br>

			[page:HTMLDOMElement domElement]: 用于事件监听的HTML元素。
		</p>

		<h2>Events</h2>

		<h3>change</h3>
		<p>
			Fires when the camera has been transformed by the controls.
		</p>

		<h3>start</h3>
		<p>
			Fires when an interaction was initiated.
		</p>

		<h3>end</h3>
		<p>
			Fires when an interaction has finished.
		</p>

		<h2>属性</h2>

		<h3>[property:Boolean autoRotate]</h3>
		<p>
			将其设为true，以自动围绕目标旋转。<br>
			请注意，如果它被启用，你必须在你的动画循环里调用[page:.update]()。
		</p>

		<h3>[property:Float autoRotateSpeed]</h3>
		<p>
			当[page:.autoRotate]为true时，围绕目标旋转的速度将有多快，默认值为2.0，相当于在60fps时每旋转一周需要30秒。<br>
			请注意，如果[page:.autoRotate]被启用，你必须在你的动画循环里调用[page:.update]()。
		</p>

		<h3>
			[property:Float dampingFactor]</h3>
		<p>
			当[page:.enableDamping]设置为true的时候，阻尼惯性有多大。<br>
			请注意，要使得这一值生效，你必须在你的动画循环里调用[page:.update]()。
		</p>

		<h3>[property:HTMLDOMElement domElement]</h3>
		<p>
			该 HTMLDOMElement 用于监听鼠标/触摸事件，该属性必须在构造函数中传入。在此处改变它将不会设置新的事件监听。
		</p>

		<h3>[property:Boolean enabled]</h3>
		<p>
			当设置为false时，控制器将不会响应用户的操作。默认值为true。
		</p>

		<h3>[property:Boolean enableDamping]</h3>
		<p>
			将其设置为true以启用阻尼（惯性），这将给控制器带来重量感。默认值为false。<br>
			请注意，如果该值被启用，你将必须在你的动画循环里调用[page:.update]()。
		</p>

		<h3>[property:Boolean enablePan]</h3>
		<p>
			启用或禁用摄像机平移，默认为true。
		</p>

		<h3>[property:Boolean enableRotate]</h3>
		<p>
			启用或禁用摄像机水平或垂直旋转。默认值为true。<br>
			请注意，可以通过将[page:.minPolarAngle polar angle]或者[page:.minAzimuthAngle azimuth angle]
			的min和max设置为相同的值来禁用单个轴，
			这将使得水平旋转或垂直旋转固定为所设置的值。
		</p>

		<h3>[property:Boolean enableZoom]</h3>
		<p>
			启用或禁用摄像机的缩放。
		</p>

		<h3>[property:Float keyPanSpeed]</h3>
		<p>
			当使用键盘按键的时候，相机平移的速度有多快。默认值为每次按下按键时平移7像素。
		</p>

		<h3>[property:Object keys]</h3>
		<p>
			这一对象包含了用于控制相机平移的按键代码的引用。默认值为4个箭头（方向）键。
			<code>
controls.keys = {
	LEFT: 37, //left arrow
	UP: 38, // up arrow
	RIGHT: 39, // right arrow
	BOTTOM: 40 // down arrow
}
			 </code>请参阅[link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode this page]来查看所有按键的代码列表。
		</p>

		<h3>[property:Float maxAzimuthAngle]</h3>
		<p>
			你能够水平旋转的角度上限。如果设置，其有效值范围为[-2 * Math.PI，2 * Math.PI]，且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。
		</p>

		<h3>[property:Float maxDistance]</h3>
		<p>
			你能够将相机向外移动多少（仅适用于[page:PerspectiveCamera]），其默认值为Infinity。
		</p>

		<h3>[property:Float maxPolarAngle]</h3>
		<p>
			你能够垂直旋转的角度的上限，范围是0到Math.PI，其默认值为Math.PI。
		</p>

		<h3>[property:Float maxZoom]</h3>
		<p>
			你能够将相机缩小多少（仅适用于[page:OrthographicCamera]），其默认值为Infinity。
		</p>

		<h3>[property:Float minAzimuthAngle]</h3>
		<p>
			你能够水平旋转的角度下限。如果设置，其有效值范围为[-2 * Math.PI，2 * Math.PI]，且旋转角度的上限和下限差值小于2 * Math.PI。默认值为无穷大。
		</p>

		<h3>[property:Float minDistance]</h3>
		<p>
			你能够将相机向内移动多少（仅适用于[page:PerspectiveCamera]），其默认值为0。
		</p>

		<h3>[property:Float minPolarAngle]</h3>
		<p>
			你能够垂直旋转的角度的下限，范围是0到Math.PI，其默认值为0。
		</p>

		<h3>[property:Float minZoom]</h3>
		<p>
			你能够将相机放大多少（仅适用于[page:OrthographicCamera]），其默认值为0。
		</p>

		<h3>
			[property:Object mouseButtons]</h3>
		<p>
			该对象包含由控件所使用的鼠标操作的引用。
			<code>
controls.mouseButtons = {
	LEFT: THREE.MOUSE.ROTATE,
	MIDDLE: THREE.MOUSE.DOLLY,
	RIGHT: THREE.MOUSE.PAN
}
			</code>
		</p>

		<h3>[property:Camera object]</h3>
		<p>
			正被控制的摄像机。
		</p>

		<h3>[property:Float panSpeed]</h3>
		<p>
			位移的速度，其默认值为1。
		</p>

		<h3>[property:Vector3 position0]</h3>
		<p>
			由[method:saveState]和[method:reset]方法在内部使用。
		</p>

		<h3>[property:Float rotateSpeed]</h3>
		<p>
			旋转的速度，其默认值为1。
		</p>

		<h3>[property:Boolean screenSpacePanning]</h3>
		<p>
			定义当平移的时候摄像机的位置将如何移动。如果为true，摄像机将在屏幕空间内平移。
			否则，摄像机将在与摄像机向上方向垂直的平面中平移。当使用 OrbitControls 时，
			默认值为true；当使用 MapControls 时，默认值为false。
		</p>

		<h3>[property:Vector3 target0]</h3>
		<p>
			由[method:saveState]和[method:reset]方法在内部使用。
		</p>

		<h3>[property:Vector3 target]</h3>
		<p>
			控制器的焦点，[page:.object]的轨道围绕它运行。
			它可以在任何时候被手动更新，以更改控制器的焦点。
		</p>

		<h3>[property:Object touches]</h3>
		<p>
			该对象包含由控件所使用的触摸操作的引用。
			<code>
controls.touches = {
	ONE: THREE.TOUCH.ROTATE,
	TWO: THREE.TOUCH.DOLLY_PAN
}
			</code>
		</p>

		<h3>[property:Float zoom0]</h3>
		<p>
			由[method:saveState]和[method:reset]方法在内部使用。
		</p>

		<h3>[property:Float zoomSpeed]</h3>
		<p>
			摄像机缩放的速度，其默认值为1。
		</p>


		<h2>Methods</h2>

		<h3>[method:null dispose] ()</h3>
		<p>
			移除所有的事件监听。
		</p>

		<h3>[method:radians getAzimuthalAngle] ()</h3>
		<p>
			获得当前的水平旋转，单位为弧度。
		</p>

		<h3>[method:radians getPolarAngle] ()</h3>
		<p>
			获得当前的垂直旋转，单位为弧度。
		</p>

		<h3>[method:void listenToKeyEvents] ( [param:HTMLDOMElement domElement] )</h3>
		<p>
			为指定的DOM元素添加按键监听。推荐将window作为指定的DOM元素。
		</p>

		<h3>[method:null reset] ()</h3>
		<p>
			将控制器重置为上次调用[page:.saveState]时的状态，或者初始状态。
		</p>

		<h3>[method:null saveState] ()</h3>
		<p>
			保存当前控制器的状态。这一状态可在之后由[page:.reset]所恢复。
		</p>

		<h3>[method:Boolean update] ()</h3>
		<p>
			更新控制器。必须在摄像机的变换发生任何手动改变后调用，
			或如果[page:.autoRotate]或[page:.enableDamping]被设置时，在update循环里调用。
		</p>

		<h2>源代码</h2>

		<p>
			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js examples/jsm/controls/OrbitControls.js]
		</p>
	</body>
</html>