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.
[name] expects that its attached 3D object is part of the scene graph.
[name] is an add-on, and must be imported explicitly. See [link:#manual/introduction/Installation Installation / Addons].
import { TransformControls } from 'three/addons/controls/TransformControls.js';
[example:misc_controls_transform misc / controls / transform ]
[page:Camera camera]: The camera of the rendered scene.
[page:HTMLDOMElement domElement]: The HTML element used for event listeners. (optional)
Creates a new instance of [name].
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".
Fires if a pointer (mouse/touch) becomes active.
Fires if a pointer (mouse/touch) is no longer active.
Fires if the controlled 3D object is changed.
See the base [page:Controls] class for common properties.
The current transformation axis.
The camera of the rendered scene.
Whether or not dragging is currently performed. Read-only property.
The current transformation mode. Possible values are "translate", "rotate" and "scale". Default is `translate`.
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`.
Whether or not the x-axis helper should be visible. Default is `true`.
Whether or not the y-axis helper should be visible. Default is `true`.
Whether or not the z-axis helper should be visible. Default is `true`.
The size of the helper UI (axes/planes). Default is *1*.
Defines in which coordinate space transformations should be performed. Possible values are "world" and "local". Default is `world`.
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`.
See the base [page:Controls] class for common methods.
[page:Object3D object]: The 3D object that should be transformed.
Sets the 3D object that should be transformed and ensures the controls UI is visible.
Removes the current 3D object from the controls and makes the helper UI invisible.
Returns the visual representation of the controls. Add the helper to your scene to visually transform the attached 3D object.
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.
Returns the transformation mode.
Resets the object's position, rotation and scale to when the current transform began.
[page:String mode]: The transformation mode.
Sets the transformation mode.
[page:Number rotationSnap]: The rotation snap.
Sets the rotation snap.
[page:Number scaleSnap]: The scale snap.
Sets the scale snap.
[page:Number size]: The size of the helper UI.
Sets the size of the helper UI.
[page:String space]: The coordinate space in which transformations are applied.
Sets the coordinate space in which transformations are applied.
[page:Number translationSnap]: The translation snap.
Sets the translation snap.
[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/TransformControls.js examples/jsm/controls/TransformControls.js]