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


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

		<h1>[name]</h1>

		<p class="desc">
			This class can be used to transform objects in 3D space by adapting a similar interaction model of DCC tools like Blender.
			Unlike other controls, it is not intended to transform the scene's camera.<br /><br />

			[name] expects that its attached 3D object is part of the scene graph.
		</p>

		<h2>Import</h2>

		<p>
			[name] is an add-on, and must be imported explicitly.
			See [link:#manual/introduction/Installation Installation / Addons].
		</p>

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

		<h2>Examples</h2>

		<p>[example:misc_controls_transform misc / controls / transform ]</p>

		<h2>Constructor</h2>

		<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
		<p>
			<p>
				[page:Camera camera]: The camera of the rendered scene.
			</p>
			<p>
				[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
			</p>
			<p>
				Creates a new instance of [name].
			</p>
		</p>

		<h2>Events</h2>

		<h3>change</h3>
		<p>
			Fires if any type of change (object or property change) is performed. Property changes
			are separate events you can add event listeners to. The event type is "propertyname-changed".
		</p>

		<h3>mouseDown</h3>
		<p>
			Fires if a pointer (mouse/touch) becomes active.
		</p>

		<h3>mouseUp</h3>
		<p>
			Fires if a pointer (mouse/touch) is no longer active.
		</p>

		<h3>objectChange</h3>
		<p>
			Fires if the controlled 3D object is changed.
		</p>

		<h2>Properties</h2>

		<p>See the base [page:Object3D] class for common properties.</p>

		<h3>[property:String axis]</h3>
		<p>
			The current transformation axis.
		</p>

		<h3>[property:Camera camera]</h3>
		<p>
			The camera of the rendered scene.
		</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 dragging]</h3>
		<p>
			Whether or not dragging is currently performed. Read-only property.
		</p>

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

		<h3>[property:String mode]</h3>
		<p>
			The current transformation mode. Possible values are "translate", "rotate" and "scale". Default is `translate`.
		</p>

		<h3>[property:Object3D object]</h3>
		<p>
			The 3D object being controlled.
		</p>

		<h3>[property:Number rotationSnap]</h3>
		<p>
			By default, 3D objects are continuously rotated. If you set this property to a numeric value (radians), you can define in which
			steps the 3D object should be rotated. Default is `null`.
		</p>

		<h3>[property:Boolean showX]</h3>
		<p>
			Whether or not the x-axis helper should be visible. Default is `true`.
		</p>

		<h3>[property:Boolean showY]</h3>
		<p>
			Whether or not the y-axis helper should be visible. Default is `true`.
		</p>

		<h3>[property:Boolean showZ]</h3>
		<p>
			Whether or not the z-axis helper should be visible. Default is `true`.
		</p>

		<h3>[property:Number size]</h3>
		<p>
			The size of the helper UI (axes/planes). Default is *1*.
		</p>

		<h3>[property:String space]</h3>
		<p>
			Defines in which coordinate space transformations should be performed. Possible values are "world" and "local". Default is `world`.
		</p>

		<h3>[property:Number translationSnap]</h3>
		<p>
			By default, 3D objects are continuously translated. If you set this property to a numeric value (world units), you can define in which
			steps the 3D object should be translated. Default is `null`.
		</p>

		<h2>Methods</h2>

		<p>See the base [page:Object3D] class for common methods.</p>

		<h3>[method:TransformControls attach] ( [param:Object3D object] )</h3>
		<p>
			<p>
				[page:Object3D object]: The 3D object that should be transformed.
			</p>
			<p>
				Sets the 3D object that should be transformed and ensures the controls UI is visible.
			</p>
		</p>

		<h3>[method:TransformControls detach] ()</h3>
		<p>
			Removes the current 3D object from the controls and makes the helper UI invisible.
		</p>

		<h3>[method:undefined dispose] ()</h3>
		<p>
			Should be called if the controls is no longer required.
		</p>

		<h3>[method:Raycaster getRaycaster] ()</h3>
		<p>
			Returns the [page:Raycaster] object that is used for user interaction. This object is shared between all instances of
			TransformControls. If you set the [page:Object3D.layers .layers] property of the [name], you will also want to
			set the [page:Raycaster.layers .layers] property on the [page:Raycaster] with a matching value, or else the [name]
			won't work as expected.
		</p>

		<h3>[method:String getMode] ()</h3>
		<p>
			Returns the transformation mode.
		</p>

		<h3>[method:undefined reset] ()</h3>
		<p>
			Resets the object's position, rotation and scale to when the current transform began.
		</p>

		<h3>[method:undefined setMode] ( [param:String mode] )</h3>
		<p>
			<p>
				[page:String mode]: The transformation mode.
			</p>
			<p>
				Sets the transformation mode.
			</p>
		</p>

		<h3>[method:undefined setRotationSnap] ( [param:Number rotationSnap] )</h3>
		<p>
			<p>
				[page:Number rotationSnap]: The rotation snap.
			</p>
			<p>
				Sets the rotation snap.
			</p>
		</p>

		<h3>[method:undefined setScaleSnap] ( [param:Number scaleSnap] )</h3>
		<p>
			<p>
				[page:Number scaleSnap]: The scale snap.
			</p>
			<p>
				Sets the scale snap.
			</p>
		</p>

		<h3>[method:undefined setSize] ( [param:Number size] )</h3>
		<p>
			<p>
				[page:Number size]: The size of the helper UI.
			</p>
			<p>
				Sets the size of the helper UI.
			</p>
		</p>

		<h3>[method:undefined setSpace] ( [param:String space] )</h3>
		<p>
			<p>
				[page:String space]: The coordinate space in which transformations are applied.
			</p>
			<p>
				Sets the coordinate space in which transformations are applied.
			</p>
		</p>

		<h3>[method:undefined setTranslationSnap] ( [param:Number translationSnap] )</h3>
		<p>
			<p>
				[page:Number translationSnap]: The translation snap.
			</p>
			<p>
				Sets the translation snap.
			</p>
		</p>

		<h2>Source</h2>

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