[page:Object3D] →

# [name]

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.

## Import

[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';`

## Examples

[example:misc_controls_transform misc / controls / transform ]

## Constructor

### [name]( [param:Camera camera], [param:HTMLDOMElement domElement] )

[page:Camera camera]: The camera of the rendered scene.

[page:HTMLDOMElement domElement]: The HTML element used for event listeners.

Creates a new instance of [name].

## Events

### change

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".

### mouseDown

Fires if a pointer (mouse/touch) becomes active.

### mouseUp

Fires if a pointer (mouse/touch) is no longer active.

### objectChange

Fires if the controlled 3D object is changed.

## Properties

See the base [page:Object3D] class for common properties.

### [property:String axis]

The current transformation axis.

### [property:Camera camera]

The camera of the rendered scene.

### [property:HTMLDOMElement domElement]

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.

### [property:Boolean dragging]

Whether or not dragging is currently performed. Read-only property.

### [property:Boolean enabled]

Whether or not the controls are enabled.

### [property:String mode]

The current transformation mode. Possible values are "translate", "rotate" and "scale". Default is `translate`.

### [property:Object3D object]

The 3D object being controlled.

### [property:Number rotationSnap]

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`.

### [property:Boolean showX]

Whether or not the x-axis helper should be visible. Default is `true`.

### [property:Boolean showY]

Whether or not the y-axis helper should be visible. Default is `true`.

### [property:Boolean showZ]

Whether or not the z-axis helper should be visible. Default is `true`.

### [property:Number size]

The size of the helper UI (axes/planes). Default is *1*.

### [property:String space]

Defines in which coordinate space transformations should be performed. Possible values are "world" and "local". Default is `world`.

### [property:Number translationSnap]

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`.

## Methods

See the base [page:Object3D] class for common methods.

### [method:TransformControls attach] ( [param:Object3D object] )

[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.

### [method:TransformControls detach] ()

Removes the current 3D object from the controls and makes the helper UI invisible.

### [method:undefined dispose] ()

Should be called if the controls is no longer required.

### [method:Raycaster getRaycaster] ()

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.

### [method:String getMode] ()

Returns the transformation mode.

### [method:undefined reset] ()

Resets the object's position, rotation and scale to when the current transform began.

### [method:undefined setMode] ( [param:String mode] )

[page:String mode]: The transformation mode.

Sets the transformation mode.

### [method:undefined setRotationSnap] ( [param:Number rotationSnap] )

[page:Number rotationSnap]: The rotation snap.

Sets the rotation snap.

### [method:undefined setScaleSnap] ( [param:Number scaleSnap] )

[page:Number scaleSnap]: The scale snap.

Sets the scale snap.

### [method:undefined setSize] ( [param:Number size] )

[page:Number size]: The size of the helper UI.

Sets the size of the helper UI.

### [method:undefined setSpace] ( [param:String space] )

[page:String space]: The coordinate space in which transformations are applied.

Sets the coordinate space in which transformations are applied.

### [method:undefined setTranslationSnap] ( [param:Number translationSnap] )

[page:Number translationSnap]: The translation snap.

Sets the translation snap.

## Source

[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/TransformControls.js examples/jsm/controls/TransformControls.js]