midas
/
threejs-obj-space


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298
							<!DOCTYPE html>
<html lang="en">
	<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 allow the camera to orbit around a target.<br>

		To use this, as with all files in the /examples directory, you will have to
		include the file seperately in your HTML.

		</p>


		<h2>Example</h2>

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

		<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 THREE.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>Constructor</h2>

		<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
		<p>
			[page:Camera object]: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.<br><br>

			[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
		</p>


		<h2>Properties</h2>

		<h3>[property:Boolean autoRotate]</h3>
		<p>
			Set to true to automatically rotate around the target.<br> Note that if this is enabled, you must call [page:.update]
			() in your animation loop.
		</p>

		<h3>[property:Float autoRotateSpeed]</h3>
		<p>
			How fast to rotate around the target if [property:Boolean autoRotate] is true. Default is 2.0, which equates to 30 seconds
			per rotation at 60fps.<br> Note that if [property:Boolean autoRotate] is enabled, you must call [page:.update]
			() in your animation loop.
		</p>

		<h3>
			[property:Float dampingFactor]</h3>
		<p>
			The damping inertia used if [property:Boolean enableDamping] is set to true.<br> Note that for this to work, you must
			call [page:.update] () in your animation loop.
		</p>

		<h3>[property:HTMLDOMElement domElement]</h3>
		<p>
			The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
			not set up new event listeners.
		</p>

		<h3>[property:Boolean enabled]</h3>
		<p>
			Whether or not the controls are enabled.
		</p>

		<h3>[property:Boolean enableDamping]</h3>
		<p>
			Set to true to enable damping (inertia), which can be used to give a sense of weight to the controls. Default is false.<br>
			Note that if this is enabled, you must call [page:.update] () in your animation loop.
		</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. Range is - Math.PI to Math.PI ( or Infinity for no limit ) and 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. Range is - Math.PI to Math.PI ( or - Infinity for no limit ) and 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 false.
		</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/js/controls/OrbitControls.js examples/js/controls/OrbitControls.js]
		</p>
	</body>
</html>