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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
							<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="utf-8" />
		<base href="../../../" />
		<script src="list.js"></script>
		<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>
		var renderer = new THREE.WebGLRenderer();
		renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( renderer.domElement );

		var scene = new THREE.Scene();

		var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );

		var 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]: The HTML element used for event listeners.
		</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>Properties</h2>

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

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

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

		<h3>[property:HTMLDOMElement domElement]</h3>
		<p>
			用于监听鼠标事件或触摸事件的HTMLDOMElement（DOM元素）。该值必须在构造函数中进行传入；
			在此更改它将不会设置新的事件监听器
		</p>

		<h3>[property:Boolean enabled]</h3>
		<p>
			控制器是否被启用。
		</p>

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

		<h3>[property:Boolean enableKeys]</h3>
		<p>
			启用或禁用键盘控制。
		</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>
			你能够水平旋转的角度的上限，范围是-Math.PI到Math.PI（或Infinity无限制），
			其默认值为Infinity。
		</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] only )，其默认值为Infinity。
		</p>

		<h3>[property:Float minAzimuthAngle]</h3>
		<p>
			你能够水平旋转的角度的下限，范围是-Math.PI到Math.PI（或-Infinity无限制），
			其默认值为-Infinity。
		</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，摄像机将在屏幕空间内平移。
			否则，摄像机将在与摄像机向上方向垂直的平面中平移。其默认值为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>
			This object contains references to the touch actions used by the controls.
			<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。
			Speed of zooming / dollying. Default is 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: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>