web3d-model-viewer
Installation
SKILL.md
<model-viewer> or three.js?
<model-viewer> (@google/model-viewer 4.4, Apache-2.0) is one HTML element that shows a glTF with orbit controls,
good default lighting, lazy loading, accessibility, and one-tap AR on Android (Scene Viewer, WebXR) and iOS (Quick
Look). For a product page it is usually the right answer, and hand-written three.js is more code for a worse
result. Decide first:
| Need | Use |
|---|---|
| Show a product, rotate it, view it in AR, swap colors | <model-viewer> |
| Hotspot labels on parts, a few camera presets, play a clip | <model-viewer> |
| Custom shaders, post-processing, physics, many models in one scene, games | three.js or R3F |
| Scroll-driven camera flights | three.js (threejs-scroll) |
Process
- Inspect and optimize the model first (
threejs-model-inspect, thenthreejs-model-optimizewithweborconfigurator). model-viewer decodes Draco, meshopt and KTX2 by itself. - Add the element, from the CDN or
npm i @google/model-viewer(import "@google/model-viewer";):