Hierarchy & inspector

The hierarchy (left) lists every entity; the inspector (right) edits the selected one. Together they’re how you build and tune a scene.

Hierarchy

The hierarchy (packages/editor/src/components/SceneHierarchy.tsx) is the entity tree — each row is a Three.js Object3D. You can:

• select (click; shift-click to multi-select);
• drag to reparent;
• search / filter by name;
• toggle visibility;
• right-click for context actions;
• read kind icons (mesh, light, camera, …).

Selecting a hierarchy row selects the entity.

Inspector

The inspector (packages/editor/src/components/InspectorPanel.tsx) shows a section per feature the selected entity has — and the fields come from the engine’s Zod schemas, so what you can edit always matches what the runtime understands. Per-entity sections:

Transform, Mesh, Material, Light, Shadow, Camera, Physics, Joints, Animation, Audio, Navigation, Particles, Spline, and Components.

With nothing selected, the inspector shows environment settings instead — background, ambient, fog, skybox/IBL, tone mapping, post-processing, navigation, and collision layers. (Post-processing is a global environment setting, not a per-entity section.)

The inspector adapts to the entity — a light shows light properties.

Schema-driven

Inspector fields are generated from the same Zod schemas documented in the Scene Schema reference. Add a field to a schema and it appears here.

See also

• Viewport, gizmo & view modes — manipulate the selection in 3D.
• Scene Schema reference — every inspector field.
• Entities & components — the model behind the tree.