This Mortal Coil

3D Viewer Presets Demo

This page demonstrates the new preset-based 3D viewer system. The refactored ModelViewer uses environment presets and tiered controls for simpler, more consistent usage across the site.

✨ New Features:

  • Environment Presets - Studio, Dramatic, Soft, Minimal lighting setups
  • Control Tiers - None, Simple, Advanced, Debug visibility levels
  • Debug Mode - One flag to show all helpers and preset selector
  • Simplified API - 5 props instead of 15+

Example 1: Gallery Viewer (Studio Preset)

Professional character showcase with balanced 3-point lighting. Simple controls for end users (rotate toggle + reset button).

preset="studio" | controlTier="simple" | autoRotate=true
Loading model...
Lighting: Key (2.0), Fill (1.0), Rim (1.8), Ambient (0.4) | Shadows: Soft | Camera FOV: 50°

Example 2: Dramatic Preset (High Contrast)

High-contrast lighting for action poses and dramatic scenes. Very bright key light with minimal fill creates strong shadows.

preset="glb" | controlTier="advanced" | toonShading=true
Loading model...
Lighting: Key (3.5), Fill (0.3), Rim (2.5), Ambient (0.2) | Shadows: Hard | Camera FOV: 45°

Example 3: Soft Preset (Gentle Lighting)

Even, diffused lighting for cute characters and friendly scenes. No shadows, bright fill light creates a gentle atmosphere.

preset="glb" | controlTier="simple" | autoRotate=true
Loading model...
Lighting: Key (1.2), Fill (1.5), Rim (0.8), Ambient (0.6) | Shadows: Disabled | Camera FOV: 50°

Example 4: Minimal Preset (Embedded Viewer)

Compact viewer for inline embedding in comics or blog posts. No visible controls, single key light, auto-rotate enabled.

preset="minimal" | controlTier="none" | width=400 | height=400
Loading model...
Loading model...
Lighting: Key (1.5), No Fill/Rim, Ambient (0.8) | Shadows: Disabled | Camera FOV: 60° (wider view)

Example 5: Debug Mode (Full Controls)

Development mode with all debug helpers and full control panel. Shows bounding box, grid, axes, light positions, and preset selector.

preset="studio" | controlTier="debug" | debugMode=true
Loading model...

Debug Mode Features: Bounding box (green), Grid & axes, Light position helpers (spheres), Preset selector dropdown, All lighting controls

Usage Guide

Available Presets

studio (Default)

Balanced 3-point lighting for professional showcase

Use for: Character gallery, detailed models

dramatic

High-contrast lighting for action scenes

Use for: Dynamic poses, villain shots

soft

Even, gentle lighting for cute characters

Use for: Chibi models, friendly atmospheres

minimal

Lightweight preset for embedded viewers

Use for: Small inline viewers, mobile

Control Tiers

none: No controls visible (embedded viewers)
simple: Rotation toggle + reset button (end users)
advanced: + Wireframe, toon shading, lighting controls (power users)
debug: All controls + helpers + preset selector (developers)

Code Example

---
import { ModelViewer } from '@components/react/3d';
---

<ModelViewer 
  client:load
  modelPath="/models/character.glb"
  preset="studio"
  controlTier="simple"
  autoRotate={true}
  height="600px"
/>

Migration Guide: See docs/components/3D_MIGRATION_GUIDE.md for detailed examples of migrating from old API to new preset system.

Documentation

  • Architecture Overview: docs/components/3D_ARCHITECTURE.md
  • Migration Guide: docs/components/3D_MIGRATION_GUIDE.md
  • Blender Workflow: docs/components/BLENDER_WORKFLOW.md
  • Preset Configuration: src/components/react/3d/presets/environments.ts