GizmoController wraps Three.js TransformControls to provide translate, rotate and scale gizmos for the selected 3D object.

Constructor

constructor(
  camera: THREE.Camera,
  domElement: HTMLElement,
  scene: THREE.Scene,
  orbit: OrbitControls
)

The TransformControls helper is added to the scene, and the gizmo size is set to 0.75 — slightly smaller than the Three.js default.

The OrbitControls Conflict

When the user drags the gizmo, the same pointer events would also orbit the camera. The controller resolves this by listening for dragging-changed:

this.controls.addEventListener('dragging-changed', (event: { value: boolean }) => {
  this.orbit.enabled = !event.value;
});

Orbit is disabled when dragging starts and re-enabled when it ends.

Mode	Shortcut	Mode String	Visual
Translate	W	'translate'	XYZ axis arrows
Rotate	E	'rotate'	XYZ rotation rings
Scale	R	'scale'	XYZ cube handles

The W/E/R shortcuts are not handled inside GizmoController. They are handled by the consuming UI component, which calls engine.setGizmoMode().

Method	Description
onDrag(changeCb, endCb)	Registers callbacks for continuous drag and drag-end
attach(id, object)	Attaches the gizmo to a mesh and stores the ID
detach()	Detaches the gizmo from any mesh
getAttachedId()	Returns the ID of the currently attached object
setMode(mode)	Switches between translate, rotate and scale
getHelper()	Returns the gizmo's visual helper for scene management
dispose()	Detaches and disposes the TransformControls