3D シーン・カメラトラッカー
Three.js ベースの 3D レンダリングと、OpenCV.js による実写カメラモーション復元。
2D 映像の上に 3D オブジェクトを違和感なく合成できます。
3D Camera を有効化
- 左サイドバーのオブジェクトツールバーから 3D Camera (Composition) をクリック。
- コンポジションが 3D ビューアに切り替わり (プレビュー右上にマウス操作のヒント表示) 、3D プリミティブ / ライトを配置できるようになります。
- マウスで 左ドラッグ = 回転 / 右ドラッグ = パン / ホイール = ズーム。
3D プリミティブ
Add 3D Primitive ボタンから以下を追加できます:
- Box — 直方体
- Sphere — 球
- Cylinder — 円柱
- Cone — 円錐
- Plane — 平面 (地面や壁)
- Torus — トーラス
各プリミティブは 3D プロパティ (Pos X / Y / Z, Rotation X / Y / Z, Scale) と カラー / マテリアルを持ちます。
3D ライト
Add 3D Light ボタンから追加。
| 種類 | 用途 |
|---|---|
| Ambient | シーン全体に均等な光。ベース照明。 |
| Point | 点光源 (電球)。距離減衰あり。 |
| Directional | 太陽光のような平行光。シャドウの主光源に。 |
| Spot | スポットライト (円錐状の光)。ステージ照明やドラマ効果。 |
カメラコントロール
3D ビューの上部ツールバーに Orbit ボタンがあります。
- Orbit ON: プレビュー操作 (マウスドラッグ) で 3D カメラを自由に動かせる。最終フレームでスクラブして任意アングルから確認可能。
- Orbit OFF: カメラは カメラトラッカー 結果に追従する (デフォルト)。
カメラトラッカー
実写映像の 2 フレームから、ORB 特徴点 → brute-force マッチング → essential matrix (5 点アルゴリズム) → カメラ姿勢 (R, t) を復元し、3D Camera に適用します。OpenCV.js を使用 (~10MB、初実行時に CDN からダウンロード)。
使い方
- トップツールバーから Camera Tracker をクリック (モーダルが開く)。
- Frame 1 (Reference) と Frame 2 (Target) に画像ファイル (PNG / JPG) をアップロード。実写映像の異なる 2 フレームを選ぶ。
- Focal length (px) を設定。35mm 換算 50mm なら
画像横幅 × 50 / 36程度。 - Max features で追跡に使う特徴点数 (デフォルト 1000)。
- Analyze をクリック。OpenCV.js ロード + 解析が走る (数秒〜数十秒)。
- 成功すると Apply to 3D Camera が有効化。クリックで 3D Camera に姿勢を適用。
ヒント
2 つのフレームは 回転 / 並進 が分かる程度に特徴点の動きがあるものを。平面的な被写体 (壁、白い紙) だと essential matrix が求まらないので避けましょう。
Orbit モードと Tracker モードの切替
2D レイヤーを Tracker 結果に従って配置したい場合は Orbit OFF、インタラクティブに 3D 空間を覗きたいときは Orbit ON。両者は排他で、Animation タイムラインでキーフレーム打ってミックスする使い方もできます。