@remotion/three

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

🌐 is a package for integrating React Three Fiber with Remotion.

<ThreeCanvas /> 将允许你在 R3F Canvas 中使用 useCurrentFrame() 和其他 Remotion 钩子。动画现在不再在 useFrame() 钩子内，而是直接渲染到标记中。
useVideoTexture() 允许你将 Remotion <Html5Video /> 用作纹理贴图。
useOffthreadVideoTexture() 相当于 useVideoTexture()，但在渲染时显示的帧与 Three.ImageTexture 完全相同，类似于 <OffthreadVideo />。

这只是提供的两个 API——对于其他所有内容，你可以使用标准的 React Three Fiber API。

🌐 These are the only two APIs provided - for everything else you can use the standard React Three Fiber APIs.

起始模板

🌐 Starter template

查看 remotion-template-three，这是一个用于 Remotion 和 React Three Fiber 的最小化模板。它是一个模板仓库，你可以在 GitHub 仓库上点击“使用此模板”来开始使用。

🌐 Check out remotion-template-three, a minimal boilerplate for Remotion and React Three Fiber. It is a template repository, you can click "Use this template" on the GitHub repo to get started.

该模板以一部带有可轻松替换视频的3D手机为特色。同样，你可以轻松更改手机的颜色、尺寸、厚度和圆角半径等属性。

🌐 The template features a 3D phone with a video inside which you can effortlessly swap out. Just as easily, you can change properties like the color, size, thickness, corner radius of the phone.

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

🌐 The template serves as a soft introduction on how to use <ThreeCanvas /> and useVideoTexture(). You can easily delete everything inside the canvas to start working on a different idea.

安装

🌐 Installation

npm
yarn
pnpm

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

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

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

你现在已设置完毕，可以在你的项目中渲染 <ThreeCanvas />。

🌐 You are now set up and can render a <ThreeCanvas /> in your project.

`<Sequence>`注释

🌐 Note on <Sequence>

一个 <Sequence> 默认会返回一个 <div> 组件，而 <ThreeCanvas> 内不允许使用该组件。为了避免错误，将 layout="none" 传递给 <Sequence>。

🌐 A <Sequence> by default will return a <div> component, which is not allowed inside a <ThreeCanvas>. To avoid an error, pass layout="none" to <Sequence>.

关于服务器端渲染的说明

🌐 Note on server-side rendering

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

🌐 Three.JS does not render with the default OpenGL renderer - we recommend to set it to angle. The config file of new projects includes by default:

import {Config} from '@remotion/cli/config';

Config.setChromiumOpenGlRenderer('angle');

由于配置文件不适用于服务器端渲染，你需要明确地添加

🌐 Since the config file does not apply to server-side rendering, you need to explicitly add

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

到服务器端渲染 API，比如 renderMedia()、renderFrames()、getCompositions()、renderMediaOnLambda() 和 renderMediaOnVercel()。

🌐 to server-side rendering APIs like renderMedia(), renderFrames(), getCompositions(), renderMediaOnLambda() and renderMediaOnVercel().

谢谢

🌐 Thanks

非常感谢 Björn Zeutzheim 研究并发现了 React Three Fiber 集成所需的技术，并进行了 @remotion/three API 的初步实现。

🌐 A big thanks to Björn Zeutzheim for researching and discovering the techniques needed for React Three Fiber integration and for doing the initial implementation of the @remotion/three APIs.