Editor Overview
A complete tour of the ShapeBox editor — every panel, toolbar, and menu explained.
Editor Overview
The ShapeBox editor is a fully browser-based 3D creation environment. It opens directly from your Dashboard — no download or plugin required.
Layout
The editor is split into five areas:
┌─────────────────────────────────────────────┐
│ Toolbar │
├──────────┬─────────────────────┬───────────┤
│ │ │ │
│ Outliner │ Viewport │ Inspector │
│ │ │ │
├──────────┴─────────────────────┴───────────┤
│ Asset Panel │
└─────────────────────────────────────────────┘
Toolbar
The toolbar runs across the top and provides access to every major function:
| Section | Controls |
|---|---|
| File | Project name, Save (Ctrl+S), Version history |
| Add | Insert primitives, lights, cameras, and imported assets |
| Transform | Move (W), Rotate (R), Scale (E), Select (Q) |
| Snap | Toggle grid snapping and configure the snap increment |
| View | Perspective / orthographic, wireframe mode, stats overlay |
| Play | Enter / exit Preview mode (Space) |
| Publish | Go live, manage visibility and sharing |
| Collaborate | Active collaborator avatars and invite controls |
| Account | Your profile menu |
Viewport
The viewport is the main 3D canvas where you build and view your scene.
Navigation
| Action | Input |
|---|---|
| Orbit | Middle-mouse drag |
| Pan | Shift + Middle-mouse drag |
| Zoom | Scroll wheel |
| Focus on selected object | F |
| Reset camera | Numpad 0 |
| Front view | Numpad 1 |
| Right view | Numpad 3 |
| Top view | Numpad 7 |
Camera modes
Switch modes from the View menu in the toolbar:
- Perspective — the default realistic view with depth.
- Orthographic — a flat, measurement-accurate view.
- AR Preview — test your scene in augmented reality via WebXR.
- VR Preview — preview in a connected VR headset.
Selecting objects
- Click an object to select it.
- Hold Shift and click to add to the selection.
- Press A to select all objects.
- Click-drag on empty space to draw a rectangular selection.
- Right-click for the context menu: duplicate, lock, group, or delete.
Outliner
The Outliner (left panel) shows the full hierarchy of every object in your scene.
- Click an object name to select it.
- Click the eye icon to toggle visibility.
- Click the lock icon to lock an object against accidental edits.
- Drag objects in the list to re-parent them and create hierarchy.
- Object type icons: mesh, light, camera, group, plugin.
Inspector
The Inspector (right panel) shows the properties of the selected object. Sections vary by object type.
Transform
- Position — X, Y, Z world-space coordinates.
- Rotation — Euler angles in degrees.
- Scale — size multiplier per axis.
Material
- Colour / Albedo — base colour or texture map.
- Metalness — surface metallic appearance (0–1).
- Roughness — surface smoothness (0 = mirror, 1 = fully matte).
- Emissive — makes the surface glow regardless of lighting.
- Opacity — transparency (0 = invisible, 1 = opaque).
- Normal Map — adds fine surface detail without extra geometry.
Physics
Assign physical behaviour to any object:
- Body type — Static (immovable), Dynamic (falls, collides), or Kinematic (script-controlled).
- Mass — affects how dynamic objects respond to forces.
- Collider — collision shape: box, sphere, capsule, or mesh.
- Restitution — bounciness (0–1).
- Friction — surface friction coefficient (0–1).
Plugins
Lists every plugin attached to this object. Expand a plugin entry to edit its parameters.
Scripts
Attach custom JavaScript or TypeScript scripts to the object. Scripts can react to events (click, hover, collision) and control properties in real time.
Asset Panel
The Asset Panel (bottom) organises all media and resources available in your project:
- Uploads — your own images, videos, audio, and 3D model files (GLTF, OBJ, FBX).
- Marketplace — browse and install community assets without leaving the editor.
- Fonts — custom typefaces for in-scene text objects.
Drag any asset from the panel directly onto the viewport or onto an object in the Outliner.
Preview mode
Press Space or click Play to enter Preview mode. In this mode:
- Physics simulations run in real time.
- All plugins and scripts execute.
- You navigate the scene as a visitor would, using
W / A / S / D+ mouse look. - Interactive elements (click handlers, animations, data bindings) are fully active.
Press Escape to return to editing.
Version history
Every save creates a snapshot. Open File → Version History to browse all snapshots by date and author. Click any snapshot to restore the project to that point in time.