3d Features

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:

1. Add default value to this.state
2. Add GUI control in the appropriate addGUI() subfolder
3. 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
• Animation — Playback speed, individual clip controls, morph targets
• Cameras — Default + scene cameras

Loaders

Environment Maps

Defined in src/environments.js as an array of { id, name, path, format } objects. To add a new environment:

1. Add entry to the array in environments.js
2. The viewer auto-discovers it via the environments import

Procedure

1. Identify which section of src/viewer.js to modify
2. For new GUI controls: add state → add GUI control → add handler
3. For new loaders: import from three/addons/, configure in constructor
4. For new environments: add to src/environments.js
5. Test with npm run dev at http://localhost:3000
6. Test with various glTF models (drag-and-drop or ?model= param)

Three.js Patterns Used

• PMREMGenerator for environment map preprocessing
• AnimationMixer for animation playback with clipAction()
• OrbitControls for camera interaction
• Box3 for model bounding box / auto-framing
• traverse() for material/mesh iteration
• LoadingManager for coordinated asset loading