VN Stage Component Test
Manual testing interface for the VNStage 3D rendering component
VN Stage Demo
Natsumi
Catherine
Testing Instructions
Use the controls below the 3D canvas to test different VN Stage features:
🎠Visibility Testing
- Toggle characters on/off to test show/hide
- Verify characters disappear smoothly
- Check memory cleanup (no console errors)
đź“Ť Position Testing
- Move characters between left/center/right slots
- Verify smooth position transitions
- Check no overlapping at same slot
đź’ˇ Focus Testing
- Set different characters as "active"
- Active character should be bright
- Non-active characters should be dimmed (40%)
🎬 Animation Testing
- Click animation buttons to test playback
- Verify animations play correctly
- Check for animation blending issues
Expected Model Paths
The demo expects these GLB files to exist:
- •
/models/natsumi-vn.glb - •
/models/catherine-vn.glb - •
/models/tokyotower.glb
If models are missing, you'll see red error boxes in their place.
Architecture Notes
- One Canvas: All characters share a single WebGL context (lightweight)
- Multiple ModelScenes: Each character is a separate ModelScene instance
- Conditional Rendering: Invisible characters are unmounted (automatic cleanup)
- Shared Lighting: All characters use the same lights (consistent look)
- Imperative API: Animations controlled via ref.current.playAnimation()