gitadmin
/
three.js
şunun yansıması https://github.com/mrdoob/three.js.git


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335
							<!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>
		[page:Controls] &rarr;

		<h1>轨道控制器（[name]）</h1>

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

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

		</p>

		<h2>导入</h2>

		<p>
			[name] 是一个附加组件，必须显式导入。
			See [link:#manual/introduction/Installation Installation / Addons].
		</p>

		<code>
			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
		</code>

		<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>
			当摄像机被组件改变时触发。
		</p>

		<h3>start</h3>
		<p>
			初始化交互时触发。
		</p>

		<h3>end</h3>
		<p>
			当交互结束时触发。
		</p>

		<h2>属性</h2>

		<p>共有属性请参见其基类[page:Controls]。</p>

		<h3>[property:Boolean autoRotate]</h3>
		<p>
			将其设为true，以自动围绕目标旋转。<br>
			请注意，如果它被启用，你必须在你的动画循环里调用[page:.update]()。
			如果希望自动旋转速度与帧速率（显示器的刷新率）无关，则必须将时间 `deltaTime`（以秒为单位）传递给 [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`的时候，阻尼惯性有多大。 Default is `0.05`.<br>
			请注意，要使得这一值生效，你必须在你的动画循环里调用[page:.update]()。
		</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: 'ArrowLeft', //left arrow
	UP: 'ArrowUp', // up arrow
	RIGHT: 'ArrowRight', // right arrow
	BOTTOM: 'ArrowDown' // down arrow
}
			 </code> 请参阅[link:https://developer.mozilla.org/zh-CN/docs/Web/API/KeyboardEvent/code KeyboardEvent.code]来查看所有按键的代码列表。
		</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 maxTargetRadius]</h3>
		<p>
			你能够让目标移动离 [page:.cursor] 有多远，其默认值为Infinity。
		</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 minTargetRadius]</h3>
		<p>
			你能够让目标移动离 [page:.cursor] 有多近，其默认值为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:Float panSpeed]</h3>
		<p>
			位移的速度，其默认值为1。
		</p>

		<h3>[property:Vector3 position0]</h3>
		<p>
			由[page:.saveState]和[page:.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>
			由[page:.saveState]和[page:.reset]方法在内部使用。
		</p>

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

		<h3>[property:Vector3 cursor]</h3>
		<p>
			被 [page:.minTargetRadius] 和 [page:.maxTargetRadius] 限制的焦点。可随时手动更新以更改 [page:.target] 的兴趣中心。
		</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>
			由[page:.saveState]和[page:.reset]方法在内部使用。
		</p>

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

		<h3>[property:Boolean zoomToCursor]</h3>
		<p>
			将此属性设置为 `true` 可以缩放至光标位置。默认值为 `false`。
		</p>

		<h2>方法</h2>

		<p>共有方法请参见其基类[page:Controls]。</p>

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

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

		<h3>[method:Float getDistance] ()</h3>
		<p>
			返回从相机到目标的距离。
		</p>

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

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

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

		<h3>[method:undefined stopListenToKeyEvents] ()</h3>
		<p>
			Removes the key event listener previously defined with [page:.listenToKeyEvents]().
		</p>

		<h3>[method:Boolean update] ( [param:Number deltaTime] )</h3>
		<p>
			更新控制器。必须在摄像机的变换发生任何手动改变后调用，或如果[page:.autoRotate]或[page:.enableDamping]被设置时，在update循环里调用。`deltaTime` 以秒为单位，是可选的，并且仅当您希望自动旋转速度独立于帧速率（显示器的刷新率）时才是必需的。
		</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>