web-3d

Topics in the source

• Web 3D
• 1. Pick the right tool
• 2. Assets
• 3. Loading strategy (protect LCP)
• 4. R3F essentials
• 5. Performance & mobile
• 6. Accessibility & fallbacks
• 7. Verify

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. | Need | Use | |---|---| | Show a product model, rotate/zoom, AR | 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 | Models: GLB, compressed. npx gltf-transform optimize in.glb out.glb --texture-compress webp (Draco/Meshopt geometry + compressed textures). Target import("./Scene"), { ssr: false }). Load when near viewport (IntersectionObserver) if not above the fold. Show a poster image (a render of the scene) until the canvas is ready, then crossfade — no layout shift (fixed aspect-ratio container). drei , useGLTF.preload(url); . Animate in useFrame((state, delta) => { ref.current.rotation.y += delta 0.3 }) — mutate

This is an excerpt. Refer to the complete source and its current requirements.