Setting the file. One moment.
Skill 01 · Remotion Best Practices
Subchapter 1.50
remotion-markup/3d.mdMarkdown2 KBView on GitHub
Follow React Three Fiber and Three.js best practices.
Only the following Remotion-specific rules need to be followed:
First, the @remotion/three package needs to be installed.
If it is not, use the following command:
npx remotion add @remotion/three # If project uses npm
bunx remotion add @remotion/three # If project uses bun
yarn remotion add @remotion/three # If project uses yarn
pnpm exec remotion add @remotion/three # If project uses pnpmYou MUST wrap 3D content in <ThreeCanvas> and include proper lighting.
<ThreeCanvas> MUST have a width and height prop.
import { ThreeCanvas } from "@remotion/three";
import { useVideoConfig } from "remotion";
const { width, height } = useVideoConfig();
<ThreeCanvas width={width} height={height}>
<ambientLight intensity={0.4} />
<directionalLight position={[5, 5, 5]} intensity={0.8} />
<mesh>
<sphereGeometry args={[1, 32, 32]} />
<meshStandardMaterial color="red" />
</mesh>
</ThreeCanvas>;Shaders, models etc MUST NOT animate by themselves.
No animations are allowed unless they are driven by useCurrentFrame().
Otherwise, it will cause flickering during rendering.
Using useFrame() from @react-three/fiber is forbidden.
Use useCurrentFrame() to perform animations.
const frame = useCurrentFrame();
const rotationY = frame * 0.02;
<mesh rotation={[0, rotationY, 0]}>
<boxGeometry args={[2, 2, 2]} />
<meshStandardMaterial color="#4a9eff" />
</mesh>;The layout prop of any <Sequence> inside a <ThreeCanvas> must be set to none.
import { Sequence } from "remotion";
import { ThreeCanvas } from "@remotion/three";
const { width, height } = useVideoConfig();
<ThreeCanvas width={width} height={height}>
<Sequence layout="none">
<mesh>
<boxGeometry args={[2, 2, 2]} />
<meshStandardMaterial color="#4a9eff" />
</mesh>
</Sequence>
</ThreeCanvas>;