| name | 3d-features |
| description | Add or modify Three.js 3D features in the viewer. Use when: adding rendering features, new GUI controls, camera behavior, loaders, post-processing, environment maps, animation features, display toggles, materials, or extending the Viewer class. |
| argument-hint | Describe the 3D feature to add or change |
3D Feature Development
When to Use
- Adding new rendering capabilities (post-processing, shadows, new material types)
- Adding or modifying dat.gui control panels
- Changing camera behavior or adding camera modes
- Adding new loaders or asset format support
- Modifying lighting, environment maps, or tone mapping
- Adding display toggles (wireframe, skeleton, grid, etc.)
- Animation playback features or morph target controls
Key File: src/viewer.js
The Viewer class manages all Three.js rendering. Key sections:
State Object
All GUI-controllable state lives in this.state (defined in constructor). To add a new toggle:
- Add default value to
this.state
- Add GUI control in the appropriate
addGUI() subfolder
- Add the handler method on the
Viewer class
GUI Folders
dat.gui controls are organized into folders created in addGUI():
- Lights — Ambient/directional intensity, punctual lights, exposure, tone mapping
- Display — Wireframe, skeleton, grid, axes, auto-rotate, background