3d

# Using Three.js and React Three Fiber in Remotion Follow React Three Fiber and Three.js best practices. Only the following Remotion-specific rules need to be followed: ## Prerequisites First, the `@remotion/three` package needs to be installed. If it is not, use the following command: ```bash 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 pnpm ``` ## Using ThreeCanvas You MUST wrap 3D content in `` and include proper lighting. `` MUST have a `width` and `height` prop. ```tsx import { ThreeCanvas } from "@remotion/three"; import { useVideoConfig } from "remotion"; const { width, height } = useVideoConfig(); ``` ## No animations not driven by `useCurrentFrame()` 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. ## Animate using `useCurrentFrame()` Use `useCurrentFrame()` to perform animations. ```tsx const frame = useCurrentFrame(); const rotationY = frame * 0.02; ``` ## Using `` inside `` The `layout` prop of any `` inside a `` must be set to `none`. ```tsx import { Sequence } from "remotion"; import { ThreeCanvas } from "@remotion/three"; const { width, height } = useVideoConfig(); ```