🎥 Scenario: the commercial that looks real
A motorcycle manufacturer needs a premium digital ad. Zero budget for a real studio, but the product has to look like it just rolled out of a luxury dealership. Three.js with PBR materials delivers that level of quality — without a physical camera.
✓ Three.js is ideal when…
✗ Three.js isn't the best choice when…
💡 Studio lighting: three-point lighting
Three-point lighting is the product photography standard that turns any mesh into a desirable object. Key light reveals the shape. Fill light softens the shadows. Rim light separates the product from the dark background.
💡 Rim light is the secret
The rim light is what separates the dark object from the dark background. Without it, the motorcycle blends into the #0a0a0a background. Position it directly behind, set intensity to 0.3–0.5, and use the brand color to add personality.
🪞 PBR material: the dealership shine
PBR (Physically Based Rendering) means the material responds to light like a real material. With metalness=0.9 e roughness=0.1, the motorcycle’s paint reflects the environment like premium automotive lacquer.
const material = new THREE.MeshStandardMaterial({
color: 0x1a0050, // roxo escuro da marca
metalness: 0.9, // quase metal puro
roughness: 0.1, // superfície polida
envMap: cubeRenderTarget.texture, // reflexo ambiente
envMapIntensity: 1.2,
});
✓ Settings that work
✗ Common material mistakes
🌀 Camera Orbit: the cinematic arc
The camera moves along an arc around the object via Math.sin e Math.cos of the current frame. The movement is slow and deliberate — 0.3–0.5 rotations per second — like a high-end cinema camera tracking the object.
💡 Speed defines the character
Slow camera (0.2–0.4 rad/s) = premium, confident, sophisticated brand. Fast camera (1+ rad/s) = energy, sports, youth. For a luxury motorcycle commercial, slow speed is always the right choice.
💬 The Complete Prompt
This is the exact prompt you give Claude Code (with the Remotion skill active). Each prompt requirement maps to an element in the Three.js scene — Claude generates the complete composition with React Three Fiber integrated.
Build a cinematic motorcycle showcase. Requirements: Studio lighting, Rotating camera orbit, Slow dramatic movement, Metallic reflections, Dark background. Render as a commercial-style product presentation.
💡 "Studio lighting" and "Metallic reflections"
These two words activate Claude’s Three.js knowledge to configure the three-point lighting system and the PBR MeshStandardMaterial. Without them, Claude may use flat lighting and a basic material — an amateur result.
🏆 4K rendering and Premium Deliverable
Once the composition is approved in preview, the 4K render with antialiasing generates the final MP4. The quality is indistinguishable from professional automotive marketing—and it took hours, not days.
Build order: from scene to commercial
Scene and camera
Create the Three.js scene inside a useEffect in Remotion. Perspective camera with fov=45, initial position at (4, 2, 4).
Mesh and PBR material
Load the motorcycle GLTF with GLTFLoader. Apply MeshStandardMaterial with metalness/roughness. Validate it in a static state before animating.
Lighting system
Add the three lights. Adjust their intensities until the motorcycle looks like it’s “on a showroom floor.” Confirm that the rim light separates it from the background.
Connect the camera to the frame
Camera.position.x = sin(frame/fps * 0.4) * 4. Render the frame in Three.js AFTER updating the camera — deterministic.
📋 Module 3.3 Summary
- ✓Three.js is the only library on the list that creates convincing 3D—cameras, lights, materials
- ✓Three-point lighting transforms any mesh into a desirable product
- ✓PBR (metalness + roughness + envMap) delivers showroom-level shine
- ✓A camera orbit via sin/cos is deterministic and proportional to the frame
- ✓Deliverable: premium commercial indistinguishable from professional automotive marketing
Next module:
🏦 Module 3.4 — Banking Onboarding (Lottie) →