🎬 Visual Storyboard — Three.js Stage Builder

Navigation Flow: Main Editor (viewport + primitives + properties) → Object Selection & Transform → Export/Preview Modal → Object Library → Camera Presets
🎮 Main Editor → 🖱 Object Select → 🔧 Properties → 📤 Export → 📷 Camera Presets
1
Main Editor Interface
Primary Workspace
stage-builder.local / Untitled Stage
Primitives
Scene Tree
Box_001
Cylinder_001
Platform_Base
Sphere_001
Actions
Platform
Box
Cylinder
X
Y
Z
+X
+Y
+Z
FPS: 60
Objects: 4
Triangles: 2.4K
Selected: Box_001
Mode: Move
Properties
Transform
X
Pos
Rot
Scl
Material
Geometry
Layers
👁 Box_001 🔓
👁 Cylinder_001 🔓
🚫 Platform_Base 🔓
👁 Sphere_001 🔓
Screen 1 Notes: Full 3-panel editor layout with a left-side icon strip (SketchUp Web / Figma style). Left toolbar: vertical strip with Select, Move, Rotate, Scale, Grid toggle, then stage element tools (Truss, Platform, Backdrop, Flown, Set, Seating), then 2D/3D toggle and Undo/Redo. Center: Three.js WebGL viewport with grid floor, XYZ gizmo in scene, axis labels. Right: live properties panel with transform (Pos/Rot/Scale), material (color/metalness/roughness), and geometry params. Orbit controls active by default.
↓
2
Object Selection & Transform Modes
Gizmo Interaction
stage-builder.local / Untitled Stage — Transform Mode
Transform:
Selected: Box_001
+X
+Y
+Z
Snap: 0.25  |  Grid: ON
Drag gizmo arrows to move on axis | Hold Shift for free transform | Press R for rotate, S for scale
Screen 2 Notes: Close-up on Move transform mode. Shows XYZ gizmo arrows attached to selected Box_001. X=red (left/right), Y=green (up/down), Z=blue (depth). Snap-to-grid overlay visible. Keyboard shortcuts R=rotate, S=scale shown in status bar. Hold Shift bypasses snap for free transform.
↓
3
Export & Preview Modal
Output Options
stage-builder.local / Export Dialog

📤 Export Stage

Export your 3D stage as a standalone file or embed code.

4
Objects
2.4K
Triangles
1.2MB
Est. Size
GLB 2.0
Format
Screen 3 Notes: Export modal with format tabs (GLB selected as primary). Options checkboxes for textures, Draco compression, embedded materials, animation. Bottom stats: object count, triangle count, estimated file size. "Download GLB" primary action. Background shows blurred 3D preview.
↓
4
Camera Presets & Orbit Controls
View Management
stage-builder.local / Camera Presets
📷 Perspective — FOV: 50° | Pos: (5, 4, 7)
Camera Presets
🎥
Perspective
Default 3D view
● Active
⬆️
Top (Ortho)
Bird's eye view
➡️
Front
Y-axis aligned
🔲
Right Side
X-axis aligned
🎬
Stage View
Audience POV
⭕
Orbit All
360° rotation
Orbit Controls
Enable dampingON
Damping factor0.05
Min distance1.0
Max distance100
Auto-rotateOFF
Screen 4 Notes: Camera preset sidebar with 6 presets: Perspective (active), Top/Ortho, Front, Right Side, Stage View (audience POV), Orbit All. Orbit controls parameters shown: damping on/off, min/max distance, auto-rotate toggle. Camera position/FOV shown in viewport overlay.

📐 Design System — Three.js Stage Builder

Color Palette

Primary: #58a6ff
Accent: #39d353
X-Axis: #f85149
BG: #0d1117

Layout

Left: 220px Primitives + Tree
Center: Fluid WebGL Viewport
Right: 260px Properties
Top: 40px Toolbar

Typography

UI: SF Mono / Consolas
Labels: 0.6–0.75rem
Input: 0.68rem monospace
Panels: uppercase 0.62rem
Visual Storyboard — Three.js Stage Builder — Generated 2026-04-02