RemotionはReactをベースにしているため、Three.jsやR3F（React Three Fiber）をそのまま動画コンポジションに組み込める。3Dアニメーションをプログラマブルに生成し、MP4として書き出す実装方法を解説する。
なぜRemotionで3D動画を作るのか
- Three.jsのアニメーションを完全にコード管理できる（バージョン管理可能）
- データドリブンな3D動画生成（例：売上グラフを3D棒グラフアニメーションで表示）
- Blenderは不要。Reactエンジニアがそのまま3D動画を作れる
- Remotion Lambdaと組み合わせることで並列3Dレンダリングも可能
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。
あなたの「作りたい」を叶えるAdobeの動画ツール
セットアップ
# 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 (
);
}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()でフレームを決定論的に管理することが正確なレンダリングの鍵となる。
あなたの「作りたい」を叶えるAdobeの動画ツール
初心者からプロまで。目的に合わせて最適な制作方法が見つかります
1まずは無料で始めるなら Adobe Express
豊富なテンプレートとAI機能で、誰でも簡単に見栄えの良い動画が作れます。SNS投稿やショート動画の作成に最適。ブラウザやスマホアプリですぐに始められます。
2プロ品質を求めるなら テンプレート活用
「こんな動画が作りたい」というイメージに合うテンプレートを選ぶだけ。テキストや映像を差し替えるだけで、プロが作ったような動画が驚くほど手軽に完成します。
3本格的な編集に挑戦するなら Creative Cloud
テンプレートのカスタマイズや、ゼロからオリジナリティを追求するならプロ用ツールが最適。2つの代表的なアプリで、表現の幅は無限大に広がります。
- Premiere Pro: カット編集、テロップ、色調整など、動画編集の全てをこなす万能ツール。
- After Effects: VFXやモーショングラフィックスなど、映像をリッチに彩る特殊効果ツール。
これらを含む20以上のアプリが全て使えるコンプリートプランがおすすめです。