Skip to main content

@remotion/three

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

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

起始模板

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

0:00 / 0:10

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

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

安装

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 的初始实现。