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

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

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

## 前提条件

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

```bash
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` プロップが必須です。

```tsx
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()` を使用します。

```tsx
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` に設定する必要があります。

```tsx
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>
```