@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 存储库上点击 "使用此模板" 来开始使用。
该模板展示了一个带有视频的 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 的初始实现。