3D
3D
R3F
Three.js
Interactive React Three Fiber playground themed to Foundry. Orbit the hero mesh, swap primitives, toggle mesh distortion, and inspect material responses.
Install
npm i three @react-three/fiber @react-three/drei · npm i -D @types/threeLoading WebGL canvas…
three.js
WebGL engine — geometries, materials, lights, and the render loop.
@react-three/fiber
React renderer for three. useFrame(delta) is your animation loop (delta in seconds).
@react-three/drei
OrbitControls, Float, ContactShadows, Grid, MeshDistortMaterial, helpers.
Material strip
Four spheres: forest metal, soft primary, warm clay, bright highlight.
Loading interactive preview…
Minimal scene scaffold
- Scale motion by capped delta (
min(delta, 0.1)) - Right-handed Y-up; meshes face +Z, cameras look −Z
- Cap device pixel ratio for mobile performance
- Mount Canvas only on the client (SSR-safe wrapper)
- Prefer local lights over CDN HDR environments for reliable deploys
When to use 3D
Product explainer heroes, configurators, and spatial data. Keep marketing chrome in DOM/Framer Motion — don’t force WebGL for simple UI motion.