3d

# 在 Remotion 中使用 Three.js 和 React Three Fiber 请遵循 React Three Fiber 和 Three.js 的最佳实践。 仅需遵循以下 Remotion 特定的规则： ## 前置条件 首先，需要安装 `@remotion/three` 包。 如果尚未安装，请使用以下命令： bash npx remotion add @remotion/three # 如果项目使用 npm bunx remotion add @remotion/three # 如果项目使用 bun yarn remotion add @remotion/three # 如果项目使用 yarn pnpm exec remotion add @remotion/three # 如果项目使用 pnpm ## 使用 ThreeCanvas 您必须将 3D 内容包裹在 `` 中并包含适当的灯光。 `` 必须具有 `width` 和 `height` 属性。 tsx import { ThreeCanvas } from "@remotion/three"; import { useVideoConfig } from "remotion"; const { width, height } = useVideoConfig(); ## 禁止非 `useCurrentFrame()` 驱动的动画 着色器、模型等不得自行进行动画处理。 除非由 `useCurrentFrame()` 驱动，否则不允许任何动画。 否则，会导致渲染过程中出现闪烁。 禁止使用来自 `@react-three/fiber` 的 `useFrame()`。 ## 使用 `useCurrentFrame()` 进行动画处理 使用 `useCurrentFrame()` 来执行动画。 tsx const frame = useCurrentFrame(); const rotationY = frame * 0.02; ## 在 `` 中使用 `` `` 内任何 `` 的 `layout` 属性必须设置为 `none`。 tsx import { Sequence } from "remotion"; import { ThreeCanvas } from "@remotion/three"; const { width, height } = useVideoConfig();