Visual Editor Gizmo

Add an in-scene visual editor that lets users click objects to select them, then drag arrow/disc handles to move or rotate them. The editor only edits entities declared in main-entities.ts — runtime-spawned entities are hidden from the hierarchy.

How It Works

• Preview only: the editor only activates in /preview. Deployed scenes never show editor UI.
• Editor toggle: a pencil button in the bottom-right corner toggles the editor on/off (starts OFF).
• Auto-discovery: finds all entities with Transform + MeshRenderer or GltfContainer. Hierarchy filters to entities whose Name is declared in main-entities.ts.
• Click to select: shows a wireframe bounding box and spawns the gizmo.
• Translate mode: 3 colored arrows (R/G/B = X/Y/Z) — drag to move along a world axis. 3 plane handles (XZ/XY/YZ) for 2-axis constrained movement.
• Rotate mode: 3 colored ring outlines — drag to rotate around a world axis.
• World-aligned gizmos: arrows and rings always point along world X/Y/Z, regardless of entity or parent rotation. Drag deltas are converted to local space for child entities.
• E key: toggle between Move and Rotate.
• F key or click ground: deselect.
• Undo/redo: key 4 = undo, Shift+4 = redo.
• Auto-save: changes POST to ${realm.baseUrl}/editor/changes on every drag end. The preview server merges them into main-entities.ts and synchronously regenerates main.crdt.

Setup Steps