Documentation is work in progress and not completeEditor
3D System
Mode System
A 3D shape has two interaction states. Which one is active decides whether a click manipulates the shape on the 2D canvas or orbits the camera inside it.
The Two Modes
| Mode | Pointer Events | What the User Can Do |
|---|---|---|
| Canvas mode (default) | 'none' on the 3D host div | Move, resize and adjust 2D properties — position, opacity, border radius. Clicks pass through to the 2D canvas system. |
| 3D editing mode | 'auto' | Orbit, pan and zoom inside the Three.js scene, and select objects within it. |
A shape enters 3D editing mode when the user double-clicks it, or when it is otherwise set as the active 3D element — that is, when activeThreeDElementId on Canvas matches the element ID.
The Transition
The isInteracting prop on ThreeDShapeRenderer flows into ThreeDShapeElement.setInteracting():
setInteracting(active: boolean): void {
if (this._isInteracting === active) return;
this._isInteracting = active;
this.engine.setOrbitEnabled(active);
this.engine.markDirty();
}When isInteracting is false, OrbitControls are disabled and the shape behaves as a static image on the canvas. Note what this method does not do: it never pauses the loop or disposes anything. A shape that vanishes on deselect is a sign something else is calling pause() or setting visible to false.