Remotion×Three.js で3Dアニメーション動画を生成する【React実装ガイド】

RemotionはReactをベースにしているため、Three.jsやR3F（React Three Fiber）をそのまま動画コンポジションに組み込める。3Dアニメーションをプログラマブルに生成し、MP4として書き出す実装方法を解説する。

なぜRemotionで3D動画を作るのか

• Three.jsのアニメーションを完全にコード管理できる（バージョン管理可能）
• データドリブンな3D動画生成（例：売上グラフを3D棒グラフアニメーションで表示）
• Blenderは不要。Reactエンジニアがそのまま3D動画を作れる
• Remotion Lambdaと組み合わせることで並列3Dレンダリングも可能

セットアップ

# Remotionプロジェクト作成
npx create-video@latest --template=blank

# Three.js + React Three Fiber + Drei（ユーティリティ集）
npm install three @react-three/fiber @react-three/drei
npm install @types/three

基本構成：3Dキューブが回転する動画

// src/compositions/RotatingCube.tsx
import { useCurrentFrame, useVideoConfig } from "remotion";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Box, MeshWobbleMaterial } from "@react-three/drei";

function AnimatedCube({ frame }: { frame: number }) {
  const rotation = (frame / 30) * Math.PI * 2; // 1秒で1回転

  return (
    
      
    
  );
}

export function RotatingCube() {
  const frame = useCurrentFrame();
  const { width, height } = useVideoConfig();

  return (
    

      
        
        
        
      
    
  );
}

重要：RemotionとThree.jsの同期

Remotionはフレームベースでレンダリングするため、Three.jsのアニメーションループ（requestAnimationFrame）ではなく、useCurrentFrame()で制御する必要がある。

// NG: Three.jsのアニメーションループをそのまま使う
useFrame((state) => {
  mesh.current.rotation.x += 0.01; // フレーム間の動きが保証されない
});

// OK: useCurrentFrameでフレームを直接指定
const frame = useCurrentFrame();
const { fps } = useVideoConfig();
const rotation = (frame / fps) * Math.PI * 2; // 1秒で1回転（決定論的）

データドリブン3Dグラフアニメーション

// src/compositions/BarChart3D.tsx
import { useCurrentFrame, interpolate, spring, useVideoConfig } from "remotion";
import { Canvas } from "@react-three/fiber";
import { Text } from "@react-three/drei";

interface BarData {
  label: string;
  value: number;
  color: string;
}

function Bar3D({ data, index, frame }: { data: BarData; index: number; frame: number }) {
  const { fps } = useVideoConfig();
  const delay = index * 5; // 各バーを5フレームずつずらして登場

  const height = spring({
    fps,
    frame: frame - delay,
    config: { damping: 15, stiffness: 80 },
    durationInFrames: 40,
  }) * data.value;

  return (
    
      
        
        
      
      
        {data.label}
      
      
        {data.value}
      
    
  );
}

export function BarChart3D() {
  const frame = useCurrentFrame();
  const { width, height } = useVideoConfig();

  const chartData: BarData[] = [
    { label: "Q1", value: 3, color: "#FF6B6B" },
    { label: "Q2", value: 5, color: "#4ECDC4" },
    { label: "Q3", value: 4, color: "#45B7D1" },
    { label: "Q4", value: 7, color: "#96CEB4" },
    { label: "Q5", value: 6, color: "#FFEAA7" },
  ];

  return (
    

      
        
        
        
        {chartData.map((d, i) => (
          
        ))}
      
    
  );
}

Root.tsxへの登録

// src/Root.tsx
import { Composition } from "remotion";
import { RotatingCube } from "./compositions/RotatingCube";
import { BarChart3D } from "./compositions/BarChart3D";

export const RemotionRoot = () => {
  return (
    <>
      
      
    
  );
};

レンダリング

# プレビュー確認
npx remotion preview

# MP4書き出し
npx remotion render BarChart3D output/barchart3d.mp4 --gl=angle

# Lambda経由（大量生成時）
npx remotion lambda render BarChart3D --props='{"data": [...]}'

注意：Three.jsのWebGLをヘッドレス環境でレンダリングする際は --gl=angle または --gl=swiftshader オプションが必要。

まとめ

Remotion×R3Fの組み合わせは、データビジュアライゼーション動画・製品プレゼン・プロモーション映像を完全コードベースで生成できる強力な手段だ。useCurrentFrame()でフレームを決定論的に管理することが正確なレンダリングの鍵となる。

あわせて読みたい

• Remotion完全ガイド
• Remotionのレンダリングを高速化するパフォーマンスチューニング完全ガイド
• Remotion Lambda でAWS並列レンダリング：大量動画を高速生成する…
• RemotionとAfterEffectsの違い・使い分けガイド：Reactエン…
• 動画DX完全ガイド
• AE×Lottie×Web完全ガイド