web-3d
Installation
SKILL.md
Web 3D
3D is the heaviest thing on a page. Treat it as a progressive enhancement layered on a page that already works and looks good without it.
1. Pick the right tool
| Need | Use |
|---|---|
| Show a product model, rotate/zoom, AR | <model-viewer> web component — simplest, accessible |
| Designer built the scene visually | Spline (export as React component / embed) — fast to ship, heavier runtime |
| Custom interactive scene in React/Next.js | React Three Fiber: npm i three @react-three/fiber @react-three/drei |
| Custom scene in vanilla / Vue / Astro | Three.js directly (npm i three) — or TresJS for Vue |
| Gradient/noise background, distortion effects | A single fullscreen shader plane (Three.js) or a lighter lib like OGL |
2. Assets
- Models: GLB, compressed.
npx gltf-transform optimize in.glb out.glb --texture-compress webp(Draco/Meshopt geometry + compressed textures). Target < 2–3 MB for a hero, ideally < 1 MB. - Textures: power-of-two sizes, ≤ 2048px, WebP/KTX2.
- Generate typed R3F components from models:
npx gltfjsx model.glb --transform. - Bake lighting into textures when possible instead of many real-time lights/shadows.