123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244 |
- <!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:Controls] →
- <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>
- [page:Camera camera]: The camera of the rendered scene.
- </p>
- <p>
- [page:HTMLDOMElement domElement]: The HTML element used for event listeners. (optional)
- </p>
- <p>
- Creates a new instance of [name].
- </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:Controls] 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:Boolean dragging]</h3>
- <p>
- Whether or not dragging is currently performed. Read-only property.
- </p>
- <h3>[property:String mode]</h3>
- <p>
- The current transformation mode. Possible values are "translate", "rotate" and "scale". Default is `translate`.
- </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:Controls] 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:Object3D getHelper] ()</h3>
- <p>
- Returns the visual representation of the controls. Add the helper to your scene to visually transform the attached
- 3D object.
- </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>
|