Appearance
Working examples
Every example below has three views:
- Split shows the running component and its source together.
- Preview gives the WebGL result the full available width.
- Code shows the complete
.tsxfile with a copy button.
The source displayed in the code panel is the same file compiled to render the preview. There is no separate hidden implementation.
1. Basic viewerLoad a GLB, fit the camera, and orbit around it.2. Model transformsControl position, rotation, and scale from React state.3. Camera and FOVEdit the lens, record the camera, and fit the model.4. Pivot and axisCompare imported, centered, and custom rotation axes.5. FOV warpPlay, pause, and scrub an immersive sequence.6. Cinematic effectsSwitch material effects and change their intensity.7. Debug helpersToggle bounds, normals, grid, and scene axes.8. Embedded editorMount the complete authoring studio inside an app.
Run the examples
bash
npm install
npm run dev:docsOpen the URL printed by VitePress and select Examples in the top navigation.
Example asset
The live examples use apps/docs/public/models/orbital-device.glb. Replace the modelUrl default in copied code with your own public GLB or GLTF URL.