Skip to main content

@remotion/three

is a package for integrating React Three Fiber with Remotion.

  • <ThreeCanvas /> will allow you to use useCurrentFrame() and other Remotion hooks within a R3F Canvas. Animations are now not inside a useFrame() hook but directly rendered into the markup.

  • useVideoTexture() allows you to use a Remotion <Video /> as a texture map.

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

Starter template​

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.

0:00 / 0:10

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.

The template serves as an 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​

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

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

Thanks​

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.