Capítulo 315 de 859

Chapter 315: TransformControls

Core Idea

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.

TransformControls expects that its attached 3D object is part of the scene graph.

Key Concepts

  • axis : string: The current transformation axis.
  • camera : Camera: The camera of the rendered scene.
  • dragging : boolean (readonly): Whether dragging is currently performed or not.
  • maxX : number: The maximum allowed X position during translation.
  • maxY : number: The maximum allowed Y position during translation.
  • maxZ : number: The maximum allowed Z position during translation.
  • minX : number: The minimum allowed X position during translation.
  • minY : number: The minimum allowed y position during translation.
  • minZ : number: The minimum allowed z position during translation.
  • mode : 'translate' | 'rotate' | 'scale': The current transformation axis.

Code Examples

import { TransformControls } from 'three/addons/controls/TransformControls.js';
  • What it demonstrates: Typical usage of TransformControls.

Reference Tables

Constructor

Signature
new TransformControls( camera : Camera, domElement : HTMLElement )

Properties

PropertyDescription
.axis : stringThe current transformation axis.
.camera : CameraThe camera of the rendered scene.
.dragging : boolean (readonly)Whether dragging is currently performed or not.
.maxX : numberThe maximum allowed X position during translation.
.maxY : numberThe maximum allowed Y position during translation.
.maxZ : numberThe maximum allowed Z position during translation.
.minX : numberThe minimum allowed X position during translation.
.minY : numberThe minimum allowed y position during translation.
.minZ : numberThe minimum allowed z position during translation.
`.mode : 'translate''rotate'
.rotationSnap : numberBy 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.
.scaleSnap : numberBy default, 3D objects are continuously scaled. If you set this property to a numeric value, you can define in which steps the 3D object should be scaled.
.showE : booleanWhether the e rotation helper should be visible or not.
.showX : booleanWhether the x-axis helper should be visible or not.
.showXY : booleanWhether the xy-plane helper should be visible or not.
.showXYZE : booleanWhether the xyze rotation helper should be visible or not.
.showXZ : booleanWhether the xz-axis helper should be visible or not.
.showY : booleanWhether the y-axis helper should be visible or not.
.showYZ : booleanWhether the yz-plane helper should be visible or not.
.showZ : booleanWhether the z-axis helper should be visible or not.
.size : numberThe size of the helper UI (axes/planes).
`.space : 'world''local'`
.translationSnap : numberBy 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.
.viewport : Vector4The viewport rectangle, in logical (CSS) pixels with the origin at the lower-left of the canvas. Set this when the renderer uses a sub-canvas viewport so pointer coordinates map to the correct region…

Methods

MethodDescription
.attach( object : Object3D ) : TransformControlsSets the 3D object that should be transformed and ensures the controls UI is visible.
.detach() : TransformControlsRemoves the current 3D object from the controls and makes the helper UI invisible.
.getHelper() : TransformControlsRootReturns the visual representation of the controls. Add the helper to your scene to visually transform the attached 3D object.
`.getMode() : 'translate''rotate'
.getRaycaster() : RaycasterReturns the raycaster that is used for user interaction. This object is shared between all instances of TransformControls.
.reset()Resets the object's position, rotation and scale to when the current transform began.
`.setColors( xAxis : numberColor
`.setMode( mode : 'translate''rotate'
.setRotationSnap( rotationSnap : number )Sets the rotation snap.
.setScaleSnap( scaleSnap : number )Sets the scale snap.
.setSize( size : number )Sets the size of the helper UI.
`.setSpace( space : 'world''local' )`
.setTranslationSnap( translationSnap : number )Sets the translation snap.

Key Takeaways

  1. TransformControls extends: EventDispatcher → Controls
  2. Most relevant properties: axis, camera, dragging, maxX.
  3. Key methods: attach, detach, getHelper, getMode.

Connects To