@remotion/three

是一个用于将 React Three Fiber 与 Remotion 集成的包。

• <ThreeCanvas /> 允许您在 R3F 画布中使用 useCurrentFrame() 和其他 Remotion 钩子。动画现在不再在 useFrame() 钩子中，而是直接渲染到标记中。

• useVideoTexture() 允许您将 Remotion <Video /> 用作纹理映射。

• useOffthreadVideoTexture() 相当于 useVideoTexture()，但在渲染期间将确切帧显示为 Three.ImageTexture，类似于 <OffthreadVideo />。

这是提供的唯一两个 API - 对于其他所有内容，您可以使用标准的 React Three Fiber API。

起始模板

查看 remotion-template-three，这是一个用于 Remotion 和 React Three Fiber 的最小样板。这是一个模板存储库，您可以在 GitHub 存储库上点击 "使用此模板" 来开始使用。

0:00 / 0:10

该模板展示了一个带有视频的 3D 手机，您可以轻松更换其中的视频。同样简单，您可以更改手机的颜色、大小、厚度、圆角半径等属性。

该模板作为如何使用 <ThreeCanvas /> 和 useVideoTexture() 的简单介绍。您可以轻松删除画布内的所有内容，以开始处理不同的想法。

安装

• npm
• yarn
• pnpm

bash
npm i three @react-three/fiber @remotion/three @types/three

bash
npm i three @react-three/fiber @remotion/three @types/three

bash
yarn add three @react-three/fiber @remotion/three @types/three

bash
yarn add three @react-three/fiber @remotion/three @types/three

bash
pnpm i three @react-three/fiber @remotion/three @types/three

bash
pnpm i three @react-three/fiber @remotion/three @types/three

您现在已经设置好，可以在您的项目中渲染<ThreeCanvas />。

关于 <Sequence> 的说明

<Sequence> 默认会返回一个 <div> 组件，这在 <ThreeCanvas> 内是不允许的。为了避免错误，请在 <Sequence> 中传递 layout="none"。

关于服务器端渲染的说明

Three.JS 不会使用默认的 OpenGL 渲染器进行渲染 - 我们建议将其设置为 angle。新项目的配置文件默认包含：

ts
import { Config } from "@remotion/cli/config";
 
Config.setChromiumOpenGlRenderer("angle");

ts
import { Config } from "@remotion/cli/config";
 
Config.setChromiumOpenGlRenderer("angle");

由于配置文件不适用于服务器端渲染，您需要显式地将以下内容添加到服务器端渲染的 API 中，如 renderMedia()、renderFrames()、getCompositions() 和 renderMediaOnLambda()。

json
"chromiumOptions": {
  "gl": "angle"
}

json
"chromiumOptions": {
  "gl": "angle"
}

感谢

特别感谢 Björn Zeutzheim 对 React Three Fiber 集成所需技术的研究和发现，以及对 @remotion/three API 的初始实现。