everything-claude-code/docs/ja-JP/skills/remotion-video-creation/rules/3d.md

name, description, metadata

name	description	metadata
3d	Three.jsとReact Three FiberによるRemotionでの3Dコンテンツ。	tags 3d, three, threejs

RemotionでのThree.jsとReact Three Fiberの使用

React Three FiberとThree.jsのベストプラクティスに従ってください。 以下のRemotion固有のルールのみ遵守が必要です:

前提条件

まず、@remotion/three パッケージをインストールする必要があります。 インストールされていない場合は、以下のコマンドを使用してください:

npx remotion add @remotion/three # プロジェクトがnpmを使用している場合
bunx remotion add @remotion/three # プロジェクトがbunを使用している場合
yarn remotion add @remotion/three # プロジェクトがyarnを使用している場合
pnpm exec remotion add @remotion/three # プロジェクトがpnpmを使用している場合

ThreeCanvasの使用

3Dコンテンツは必ず <ThreeCanvas> でラップし、適切なライティングを含める必要があります。 <ThreeCanvas> には width と height プロップが必須です。

import { ThreeCanvas } from "@remotion/three";
import { useVideoConfig } from "remotion";

const { width, height } = useVideoConfig();

<ThreeCanvas width={width} height={height}>
  <ambientLight intensity={0.4} />
  <directionalLight position={[5, 5, 5]} intensity={0.8} />
  <mesh>
    <sphereGeometry args={[1, 32, 32]} />
    <meshStandardMaterial color="red" />
  </mesh>
</ThreeCanvas>

useCurrentFrame() によって駆動されないアニメーションの禁止

シェーダーやモデルなどは自律的にアニメーションしてはなりません。 useCurrentFrame() によって駆動されないアニメーションは許可されません。 そうでなければ、レンダリング中にちらつきが発生します。

@react-three/fiber の useFrame() の使用は禁止されています。

useCurrentFrame() を使ったアニメーション

アニメーションには useCurrentFrame() を使用します。

const frame = useCurrentFrame();
const rotationY = frame * 0.02;

<mesh rotation={[0, rotationY, 0]}>
  <boxGeometry args={[2, 2, 2]} />
  <meshStandardMaterial color="#4a9eff" />
</mesh>

<ThreeCanvas> 内での <Sequence> の使用

<ThreeCanvas> 内の <Sequence> の layout プロップは none に設定する必要があります。

import { Sequence } from "remotion";
import { ThreeCanvas } from "@remotion/three";

const { width, height } = useVideoConfig();

<ThreeCanvas width={width} height={height}>
  <Sequence layout="none">
    <mesh>
      <boxGeometry args={[2, 2, 2]} />
      <meshStandardMaterial color="#4a9eff" />
    </mesh>
  </Sequence>
</ThreeCanvas>