Since React Three Fiber is a custom renderer, normally the React contexts that surround it don't work inside. This would normally break the usage of it in Remotion, but this component wraps the contexts so you can write your markup as expected.
Instead of using React Three Fibers
useFrame API, you can (and must) write your animations fully declaratively using Remotions
useCurrentFrame API. This will ensure that you can scrub back and forth in the timeline and pause the animation.
A browser bug would normally cause the layout to be broken because we apply a
scale transform to the canvas in preview mode. To work around this problem, the
<ThreeCanvas /> requires the
height props to be set.
A spinning, color changing, scaling cube. This example can also be found in the
examples folder of the Remotion repo.