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


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308
							<!DOCTYPE html>
<html lang="en">
	<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">
		궤도 컨트롤을 사용하면 카메라가 대상 주위를 공전 할 수 있습니다.<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()는 카메라 변환설정을 수동으로 변경한 후에 호출해야 합니다.
		camera.position.set( 0, 20, 100 );
		controls.update();

		function animate() {

			requestAnimationFrame( animate );

			// 만약 controls.enableDamping, controls.autoRotate 둘 중 하나라도 true로 설정될 경우 필수로 호출되어야 합니다.
			controls.update();

			renderer.render( scene, camera );

		}
		</code>

		<h2>예시</h2>

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

		<h2>생성자</h2>

		<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
		<p>
			[page:Camera object]: (필수) 제어할 카메라 객체 입니다. 해당 객체가 장면에 포함되지 않을 경우 다른 객체의 자식이 아니여야 합니다..<br><br>

			[page:HTMLDOMElement domElement]: 이벤트 리스너에 사용되는 HTML 엘리먼트입니다.
		</p>

		<h2>이벤트</h2>

		<h3>변경</h3>
		<p>
			컨트롤에 의해 카메라가 변환되면 호출됩니다.
		</p>

		<h3>start</h3>
		<p>
			상호 작용이 시작되면 호출됩니다.
		</p>

		<h3>end</h3>
		<p>
			상호 작용이 끝나면 호출됩니다.
		</p>

		<h2>특성</h2>

		<h3>[property:Boolean autoRotate]</h3>
		<p>
			대상 주위를 자동으로 회전하려면 true로 설정합니다.<br> autoRotate를 활성할 경우, 애니메이션 루프에서 [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일 경우 에니메이션 루프에서 [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로 설정합니다.<br>
			만약 enableDamping을 활성화 할 경우, 애니메이션 루프에서 [page:.update]를 호출해야 합니다.
		</p>

		<h3>[property:Boolean enableKeys]</h3>
		<p>
			Enable or disable the use of keyboard controls.
		</p>

		<h3>[property:Boolean enablePan]</h3>
		<p>
			Enable or disable camera panning. Default is true.
		</p>

		<h3>[property:Boolean enableRotate]</h3>
		<p>
			Enable or disable horizontal and vertical rotation of the camera. Default is true.<br>
			Note that it is possible to disable a single axis by setting the min and max of the
			[page:.minPolarAngle polar angle] or [page:.minAzimuthAngle azimuth angle] to the same value,
			which will cause the vertical or horizontal rotation to be fixed at that value.
		</p>

		<h3>[property:Boolean enableZoom]</h3>
		<p>
			Enable or disable zooming (dollying) of the camera.
		</p>

		<h3>[property:Float keyPanSpeed]</h3>
		<p>
			How fast to pan the camera when the keyboard is used. Default is 7.0 pixels per keypress.
		</p>

		<h3>[property:Object keys]</h3>
		<p>
			This object contains references to the keycodes for controlling camera panning. Default is the 4 arrow keys.
			<code>
controls.keys = {
	LEFT: 37, //left arrow
	UP: 38, // up arrow
	RIGHT: 39, // right arrow
	BOTTOM: 40 // down arrow
}
			 </code> See [link:https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode this page] for a full
			list of keycodes.
		</p>

		<h3>[property:Float maxAzimuthAngle]</h3>
		<p>
			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.
		</p>

		<h3>[property:Float maxDistance]</h3>
		<p>
			How far you can dolly out ( [page:PerspectiveCamera] only ). Default is Infinity.
		</p>

		<h3>[property:Float maxPolarAngle]</h3>
		<p>
			How far you can orbit vertically, upper limit. Range is 0 to Math.PI radians, and default is Math.PI.
		</p>

		<h3>[property:Float maxZoom]</h3>
		<p>
			How far you can zoom out ( [page:OrthographicCamera] only ). Default is Infinity.
		</p>

		<h3>[property:Float minAzimuthAngle]</h3>
		<p>
			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.
		</p>

		<h3>[property:Float minDistance]</h3>
		<p>
			 How far you can dolly in ( [page:PerspectiveCamera] only ). Default is 0.
		</p>

		<h3>[property:Float minPolarAngle]</h3>
		<p>
			How far you can orbit vertically, lower limit. Range is 0 to Math.PI radians, and default is 0.
		</p>

		<h3>[property:Float minZoom]</h3>
		<p>
			How far you can zoom in ( [page:OrthographicCamera] only ). Default is 0.
		</p>

		<h3>
			[property:Object mouseButtons]</h3>
		<p>
			This object contains references to the mouse actions used by the controls.
			<code>
controls.mouseButtons = {
	LEFT: THREE.MOUSE.ROTATE,
	MIDDLE: THREE.MOUSE.DOLLY,
	RIGHT: THREE.MOUSE.PAN
}
			</code>
		</p>

		<h3>[property:Camera object]</h3>
		<p>
			The camera being controlled.
		</p>

		<h3>[property:Float panSpeed]</h3>
		<p>
			Speed of panning. Default is 1.
		</p>

		<h3>[property:Vector3 position0]</h3>
		<p>
			Used internally by the [method:saveState] and [method:reset] methods.
		</p>

		<h3>[property:Float rotateSpeed]</h3>
		<p>
			Speed of rotation. Default is 1.
		</p>

		<h3>[property:Boolean screenSpacePanning]</h3>
		<p>
		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.
		</p>

		<h3>[property:Vector3 target0]</h3>
		<p>
			Used internally by the [method:saveState] and [method:reset] methods.
		</p>

		<h3>[property:Vector3 target]</h3>
		<p>
			The focus point of the controls, the [page:.object] orbits around this. It can be updated manually at any point to change
			the focus of the controls.
		</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>
			Used internally by the [method:saveState] and [method:reset] methods.
		</p>

		<h3>[property:Float zoomSpeed]</h3>
		<p>
			Speed of zooming / dollying. Default is 1.
		</p>


		<h2>Methods</h2>

		<h3>[method:null dispose] ()</h3>
		<p>
			Remove all the event listeners.
		</p>

		<h3>[method:radians getAzimuthalAngle] ()</h3>
		<p>
			Get the current horizontal rotation, in radians.
		</p>

		<h3>[method:radians getPolarAngle] ()</h3>
		<p>
			Get the current vertical rotation, in radians.
		</p>

		<h3>[method:null reset] ()</h3>
		<p>
			Reset the controls to their state from either the last time the [page:.saveState] was called, or the initial state.
		</p>

		<h3>[method:null saveState] ()</h3>
		<p>
			Save the current state of the controls. This can later be recovered with [page:.reset].
		</p>

		<h3>[method:Boolean update] ()</h3>
		<p>
			Update the controls. Must be called after any manual changes to the camera's transform,
			or in the update loop if [page:.autoRotate] or [page:.enableDamping] are set.
		</p>

		<h2>Source</h2>

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