1---
2name: 3d
3description: 3D content in Remotion using Three.js and React Three Fiber.
4metadata:
5  tags: 3d, three, threejs
6---
7 
8# Using Three.js and React Three Fiber in Remotion
9 
10Follow React Three Fiber and Three.js best practices.  
11Only the following Remotion-specific rules need to be followed:
12 
13## Prerequisites
14 
15First, the `@remotion/three` package needs to be installed.  
16If it is not, use the following command:
17 
18```bash
19npx remotion add @remotion/three # If project uses npm
20bunx remotion add @remotion/three # If project uses bun
21yarn remotion add @remotion/three # If project uses yarn
22pnpm exec remotion add @remotion/three # If project uses pnpm
23```
24 
25## Using ThreeCanvas
26 
27You MUST wrap 3D content in `<ThreeCanvas>` and include proper lighting.  
28`<ThreeCanvas>` MUST have a `width` and `height` prop.
29 
30```tsx
31import { ThreeCanvas } from "@remotion/three";
32import { useVideoConfig } from "remotion";
33 
34const { width, height } = useVideoConfig();
35 
36<ThreeCanvas width={width} height={height}>
37  <ambientLight intensity={0.4} />
38  <directionalLight position={[5, 5, 5]} intensity={0.8} />
39  <mesh>
40    <sphereGeometry args={[1, 32, 32]} />
41    <meshStandardMaterial color="red" />
42  </mesh>
43</ThreeCanvas>;
44```
45 
46## No animations not driven by `useCurrentFrame()`
47 
48Shaders, models etc MUST NOT animate by themselves.  
49No animations are allowed unless they are driven by `useCurrentFrame()`.  
50Otherwise, it will cause flickering during rendering.
51 
52Using `useFrame()` from `@react-three/fiber` is forbidden.
53 
54## Animate using `useCurrentFrame()`
55 
56Use `useCurrentFrame()` to perform animations.
57 
58```tsx
59const frame = useCurrentFrame();
60const rotationY = frame * 0.02;
61 
62<mesh rotation={[0, rotationY, 0]}>
63  <boxGeometry args={[2, 2, 2]} />
64  <meshStandardMaterial color="#4a9eff" />
65</mesh>;
66```
67 
68## Using `<Sequence>` inside `<ThreeCanvas>`
69 
70The `layout` prop of any `<Sequence>` inside a `<ThreeCanvas>` must be set to `none`.
71 
72```tsx
73import { Sequence } from "remotion";
74import { ThreeCanvas } from "@remotion/three";
75 
76const { width, height } = useVideoConfig();
77 
78<ThreeCanvas width={width} height={height}>
79  <Sequence layout="none">
80    <mesh>
81      <boxGeometry args={[2, 2, 2]} />
82      <meshStandardMaterial color="#4a9eff" />
83    </mesh>
84  </Sequence>
85</ThreeCanvas>;
86```
87