Each 3D object and camera position is calculated deterministically from the frame number — no surprises in the render.
🌐 What Three.js is in the Remotion context
Three.js is the most widely used JavaScript library for creating 3D graphics on the web via WebGL. In the context of Remotion, it transforms three-dimensional scenes into video frames — each frame is a static render calculated from the frame number.
✗ Without Three.js
- ✗3D scenes require specialized software (Blender, Cinema 4D, After Effects + plugins).
- ✗Closed workflow: export, reimport, re-render after every change.
- ✗Difficult to version and practically impossible to automate with a prompt.
✓ With Three.js + Remotion
- ✓3D scene described in code — Claude generates it, and you iterate in the same session.
- ✓Frame N always produces the same image: deterministic rendering, no artifacts.
- ✓Versionable in git, parameterizable, reusable as a React component.
🎯 Use cases: when 3D is the solution
Three.js shines in three types of scenes that would be impractical with CSS or animated SVG: product rotation, environment flythrough e explanatory animations with real perspective.
Product rotation
A 3D product model slowly rotating under clean lighting. Claude generates the geometry, sets up the lighting, and ties the rotation to the frame count. The result: a solid render, consistent lighting, smooth motion — in a single prompt.
Environment flythrough
The camera moves through a 3D space along a parametric curve — architecture, spatial infographics, 3D data visualization. The camera orbits as the frame advances.
Explainer animations
Objects explode into parts, molecules assemble, data structures form in 3D. Real perspective conveys depth that flat CSS can’t.
🧪 The Three.js quality test
To evaluate the quality of a Three.js output, give Claude a 3D model and ask for a slow rotation with a camera orbit. The expected result: clean lighting, smooth motion, and a solid render without flicker—all from a single prompt.
Crie uma composição Remotion com Three.js: - Um cubo com material MeshStandardMaterial - Rotação lenta no eixo Y ligada ao frame count - Câmera em órbita circular com raio=5, altura=2 - Luz direcional limpa + luz ambiente fraca - Render determinístico: frame N → mesma imagem
💡 What to evaluate in the output
- •Clean lighting: soft shadows, without blown-out highlights.
- •Smooth movement: rotation proportional to the frame — no jumps.
- •Solid render: without flicker or z-fighting between faces.
⚖️ Vanilla Three.js vs. React Three Fiber
There are two ways to use Three.js in Remotion: the Vanilla Three.js (direct control of the WebGL pipeline) and React Three Fiber (R3F) (React wrapper with JSX for 3D). The choice matters for deterministic rendering.
| Criterion | Vanilla Three.js | React Three Fiber |
|---|---|---|
| Pipeline control | Direct (scene/camera/renderer) | Via JSX + reconciler |
| Deterministic timing | Precise — tied to the frame | Can introduce inconsistency |
| Claude reliability | High (well-documented API) | Smaller (extra abstraction) |
| 2D composition | Manual | Natural (JSX + Remotion hooks) |
| When to use | Simple, contained scenes | Complexity that requires components |
🔷 Recommendation
Use Vanilla for simple, contained 3D scenes — Claude generates more reliable vanilla code because the API is well documented and solid in its training data. Reserve the R3F for when complexity requires composition with components and integration with Remotion’s 2D layers.
🏗️ The Three.js → Remotion pipeline
The Three.js workflow inside Remotion follows four steps: create the scene, position the camera, calculate the state from the frame number, and render the frame to the canvas. Each step is pure—with no external side effects.
💡 The key to determinism
The position of every 3D object and the camera position are calculated as pure functions of the frame number. There’s no physics state or user interaction—just math. That’s what ensures the render is identical on any machine.
📐 Three.js Best Practices with Claude
Three.js prompts work best when you describe the geometry, material, and motion separately. Claude understands better when the instruction is physical ("rotating cube" or "orbiting camera") than abstract ("make it look dynamic").
✗ Vague prompt
- ✗"Create a cool 3D animation with objects."
- ✗"Make it look like it's flying through space."
- ✗Without specifying geometry, material, or lighting.
✓ Specific prompt
- ✓"Sphere with MeshPhongMaterial, Y rotation = frame × 0.015."
- ✓"Camera at position (0,2,5), looking at the origin."
- ✓"DirectionalLight at (1,2,3) with intensity 1.5."
🔷 Iterate in the same session
Three.js is a library where rapid iteration within the same session it’s well worth it. Claude keeps the scene context, and you can adjust the lighting, camera, and geometry with follow-up prompts without rewriting everything.
📌 Module summary
Next module:
2.5 — Lottie: the fastest path from prompt to usable output.