TransformControlsPlugin

Example — Source Code — API Reference

Transform Controls Plugin adds support for moving, rotating and scaling objects in the viewer with interactive widgets.

Under the hood, TransformControlsPlugin uses TransformControls2 to provide the interactive controls, it is a extended version of three.js TransformControls.

When the plugin is added to the viewer, it interfaces with the PickingPlugin and shows the control gizmos when an object is selected and hides them when the object is unselected.

If the PickingPlugin is not added to the viewer before the TransformControlsPlugin, it is added automatically with the plugin.

import {ThreeViewer, TransformControlsPlugin} from 'threepipe'

const viewer = new ThreeViewer({...})

const transfromControlsPlugin = viewer.addPluginSync(new TransformControlsPlugin())

// Get the underlying transform controls
console.log(transfromControlsPlugin.transformControls)

Multi-Object Transform

When multiple objects are selected (Shift+Click), the gizmo appears at the median position of all selected objects. Translating, rotating, and scaling applies to all selected objects simultaneously, maintaining their relative positions. The coordinate space is forced to world mode during multi-select. Undo/redo records a single step for the entire group operation. See PickingPlugin for multi-selection controls.

Pivot Point Editing

To interactively edit an object's pivot point (origin), use the PivotEditPlugin alongside this plugin. It provides a separate translate-only gizmo for moving the pivot while keeping the object mesh in place.