Scene Editor
The Yugma scene editor is a browser-based 3D environment for assembling and editing scenes.
Interface Layout
The editor uses a three-column layout:
Left Column (220px)
- Project Info — Project name, object/vertex counts, save and share controls
- Library — Primitive shape buttons to add objects to the scene
Center Viewport
- 3D Canvas — Interactive Three.js viewport with orbit controls
- Viewport Toolbar — Transform mode buttons (Translate, Rotate, Scale, Select)
- Timeline — Animation keyframe editor at the bottom
Right Column (260px)
- Scene Hierarchy — Tree view of all objects in the scene
- Properties Panel — Transform, material, and visibility settings for the selected object
Working with Objects
Adding Objects
Click a primitive in the Library panel. The object appears at the world origin (0, 0, 0) with default transform and material settings.
Selecting Objects
- Click an object in the 3D viewport
- Click an object name in the Scene Hierarchy
- Escape to deselect
Transforming Objects
- Select an object
- Choose a transform mode (
T/R/S) - Drag the gizmo handles in the viewport, or type values in the Properties panel
Transform values are displayed in the Properties panel with X (red), Y (green), Z (blue) axis labels.
Duplicating Objects
Select an object and press Cmd/Ctrl + D. The duplicate appears at the same position with "(copy)" appended to the name.
Deleting Objects
Select an object and press Delete or Backspace.
Renaming Objects
Double-click the object name in the Scene Hierarchy to enter edit mode. Press Enter or click away to confirm.
Materials
Every object has a PBR (Physically Based Rendering) material with these properties:
| Property | Range | Default | Description |
|---|---|---|---|
| Color | Hex | #ffffff | Base albedo color |
| Roughness | 0–1 | 0.5 | Surface roughness |
| Metalness | 0–1 | 0.0 | Metallic appearance |
| Opacity | 0–1 | 1.0 | Transparency |
| Wireframe | on/off | off | Wireframe render mode |
| Emissive | Hex | #000000 | Self-illumination color |
| Emissive Intensity | 0–3 | 0.0 | Emissive brightness |
Environment
The scene includes:
- Ambient light for base illumination
- Directional light with soft shadows
- Grid helper on the ground plane
- Orbit controls for camera navigation (drag to rotate, scroll to zoom, right-drag to pan)
Undo/Redo
All transform, material, and structural changes are tracked in the history stack. Use Cmd/Ctrl + Z to undo and Cmd/Ctrl + Shift + Z to redo.
GLTF Import
Drag and drop .gltf or .glb files into the viewport to import custom 3D models. Imported models appear in the scene hierarchy and can be transformed like any other object.