Skip to main content

<ThreeCanvas>

一个用于React Three Fiber的<Canvas />的包装器，与Remotion的useCurrentFrame()同步。

由于React Three Fiber是一个自定义渲染器，通常包围它的React上下文在内部不起作用。这通常会破坏在Remotion中使用它的用法，但是这个组件包装了上下文，因此您可以按预期编写您的标记。

您可以（并且必须）使用Remotion的useCurrentFrame API完全声明性地编写动画，而不是使用React Three Fiber的useFrame API。这将确保您可以在时间轴上前后移动并暂停动画。

一个浏览器bug通常会导致布局被破坏，因为我们在Studio中对画布应用了scale变换。为了解决这个问题，<ThreeCanvas />需要设置width和height属性。

示例​

一个旋转、颜色变化、缩放的立方体。此示例也可以在Remotion存储库的examples文件夹中找到。

tsx
import { ThreeCanvas } from "@remotion/three";
import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
 
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;
tsx
import { ThreeCanvas } from "@remotion/three";
import { interpolate, useCurrentFrame, useVideoConfig } from "remotion";
 
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;

关于<Sequence>的说明​

默认情况下，<Sequence>将返回一个不允许在<ThreeCanvas>内部的<div>组件。为了避免错误，请将layout="none"传递给<Sequence>。

参见​