Chapter 261: <ThreeCanvas>

Core Idea

A wrapper for React Three Fiber's <Canvas /> which synchronizes with Remotions useCurrentFrame().

Key Concepts

• Example
• frameloop behavior during rendering
• Note on <Sequence>
• Using videos inside a <ThreeCanvas>
• See also

Code Examples

const ThreeBasic: React.FC = () => {
  const frame = useCurrentFrame();
  const {width, height} = useVideoConfig();

  return (
    <ThreeCanvas
      orthographic={false}
      width={width}
      height={height}
      style={{
        backgroundColor: 'white',
      }}
      camera={{fov: 75, position: [0, 0, 470]}}
    >
      <ambientLight intensity={0.15} />
      <pointLight args={[undefined, 0.4]} position={[200, 200, 0]} />
      <mesh position={[0, 0, 0]} rotation={[frame * 0.06 * 0.5, frame * 0.07 * 0.5, frame * 0.08 * 0.5]} scale={interpolate(Math.sin(frame / 10), [-1, 1], [0.8, 1.2])}>
        <boxGeometry args={[100, 100, 100]} />
        <meshStandardMaterial color={[Math.sin(frame * 0.12) * 0.5 + 0.5, Math.cos(frame * 0.11) * 0.5 + 0.5, Math.sin(frame * 0.08) * 0.5 + 0.5]} />
      </mesh>
    </ThreeCanvas>
  );
};

export default ThreeBasic;

• What it demonstrates: Usage pattern for <ThreeCanvas> from the official docs.

Key Takeaways

1. Understand example when working with <ThreeCanvas>.
2. Understand frameloop behavior during rendering when working with <ThreeCanvas>.
3. Understand note on <sequence> when working with <ThreeCanvas>.
4. Understand using videos inside a <threecanvas> when working with <ThreeCanvas>.
5. Understand see also when working with <ThreeCanvas>.

Connects To

• Angular: related page in the Framework & Renderer Integrations section.
• Figma: related page in the Framework & Renderer Integrations section.
• use Gsap Timeline: related page in the Framework & Renderer Integrations section.