Three.jsのIFCシーンの中に、MP4を配置できますか？

はい、できます。HTMLVideoElementでVideoTextureを駆動し、それをIFCモデルと同じシーン内の平面に適用します。メディア要素、テクスチャ、マテリアル、ジオメトリの管理と破棄は、アプリケーション側で行う必要があります。

展示会で最も効果的な動画の配置モードはどれですか？

最初に見せる表示としては、カメラの方を向くビルボードが最も確実です。プレゼンターがカメラを動かしても読みやすさが保たれるからです。地面へのオーバーレイは空間的な文脈をより強く伝えられますが、配置と不透明度を慎重に調整する必要があります。

Operations Pavilionのクリップは、実際の工事映像ですか？

いいえ。対応するIFCとあわせて作成した8秒間の合成ループ動画で、合成であることを明記しています。オフラインでの展示ワークフローを再現できるようにする、ただそれだけのために作られたものです。

BIM・IFCブログに戻る

デジタルツイン · 2026-08-21 · 10分

IFCと動画を3D地形上に配置：インタラクティブな施工デモ

実際のビューアーが、動画をスクリーン、地形オーバーレイ、ビルボードとしてIFCの横に配置する様子をご覧ください。ブラウザーのデモでは、メートル単位の位置指定と不透明度の調整も試せます。

「IFC and Video on 3D Terrain」のタイトル入りカバー画像。背景は実際のビューアーのキャプチャで、Operations Pavilionと動画配置のコントロールが写っている

一般的な動画プレーヤーは時間の流れを伝えられても、空間は伝えられません。一般的なIFCビューアーは空間を伝えられても、現場で記録された視覚的な証拠が抜け落ちがちです。この2つを1つの3D空間にまとめれば、プレゼンターはアプリケーションを切り替えることなく、設計された要素、地形の文脈、記録された現況を指し示すことができます。

目的は、あらゆる場所に動画を貼り付けることではありません。ユーザーの問いに答える配置モードを選ぶことです。このカメラは何を捉えたのか。この進捗の証拠はどこに属するのか。話題になっているのはどの面、どの作業エリアなのか。

オフラインのサンプルクリップを見る

Operations Pavilionの施工進捗ループ

同梱のIFC4パビリオンと組み合わせた、8秒間の合成ループ動画。

IFC + 3D動画をライブで試す

ライブサンプルを起動すると、対応するIFCがそのまま読み込まれ、ビデオテクスチャが1つ作成されて、両方がまとめて画面に収まります。クリップはミュートの状態で始まり、ローカルでループ再生されるため、デモはストリーミングサービスにも展示会場のWi-Fiにも依存しません。

Operations Pavilion：IFC + ビデオテクスチャ

同梱のIFC4モデルと、それに対応する合成の進捗ループ動画を、カメラの方を向く3Dリソースとして使うインタラクティブなWebGLサンプル。

実際のIFC Viewer Onlineの画面。パビリオン、動画のビルボード、メートル単位の位置・サイズ・不透明度のコントロールが表示されている — IFCと動画の準備ができました。ドラッグで視点を回転できます

IFC Viewer Onlineの画面。Operations Pavilion、動画のビルボード、スクリーン・地形・位置・幅・不透明度のコントロールが表示されている — 実際の製品画面のキャプチャ：同梱のIFCとMP4が一緒に読み込まれ、動画のサーフェスは位置、サイズ、透明度を調整できます。

3つの配置モードと、それぞれの役割

IFCのパビリオンの横に施工動画を、垂直のスクリーン、地面に沿った地形オーバーレイ、カメラを向くビルボードとして配置した様子の比較 — スクリーン、地面オーバーレイ、ビルボードは表現上の選択肢であり、互いに置き換えのきく視覚効果ではありません。

モード	最適な用途	主なリスク
スクリーン	点検ステーション、ファサードや設備のカメラ	3D上の位置が恣意的だと、モデルから浮いて見える
地面／地形	進捗エリア、ドローンで捉えた周辺状況、掘削の記録	凹凸のある地形でのZファイティングや、見かけだけの精度
ビルボード	展示会、ガイドツアー、手早いストーリーテリング	カメラに追従するため、空間的な裏付けとしては弱い

不透明度と地形は、飾りではなく製品の機能

不透明度は、記録されたピクセル越しに設計ジオメトリを見せる必要があるときに役立ちます。飾りのスライダーではありません。不透明度が低いと動画が読み取れなくなり、逆に完全に不透明にすると、議論の対象であるIFCの情報を隠してしまうことがあります。実用的な既定値は、メディアを読み取れる状態に保ちつつ、ワンクリックで比較できる状態を用意しておくことです。

地面に置く動画には、メートル単位の幅、ローカル位置、方位（ヨー）、そしてわずかな表面オフセットも必要です。アプリケーションが表示中の地形やシーンのメッシュをサンプリングできれば、平面を表面にスナップさせることができます。それでも、結果として得られた配置はUIに表示すべきです。自動スナップはあくまで便利機能であり、測量に基づく変換ではありません。

Operations PavilionのIFCモデルと、3Dテクスチャとして配置する準備が整った、暖色の施工進捗動画のフレーム — この固定のポスター画像は、プレーヤー、ソーシャル向けメタデータ、動画検索用のマークアップで共通して使われます。

パフォーマンスとライフサイクルのルール

HTMLVideoElementとWebGLのVideoTextureは、ユーザーがサンプルを開いたとき、またはリソースがビューポートに入ったときに初めて作成します。
不透明度や配置を変更する間は1つのテクスチャを使い回し、スライダーを動かすたびにデコーダーを作り直さないようにします。
非表示のときは動画を一時停止し、削除するときはメディア要素、テクスチャ、マテリアル、ジオメトリ、オブジェクトURLを破棄します。
ページには静的なポスター画像を置いておき、WebGLが起動する前から、ユーザーとクローラーに有用なコンテンツを提供します。
展示会では小さなローカルのMP4/WebMループを優先し、そのうえでWebRTCによるカメラや画面キャプチャを、明示的なライブソースとして追加します。

展示会向け5分間のストーリー

まずIFCだけを開き、パビリオンを画面に収めます。
対応するクリップをビルボードとして読み込み、来場者全員がすぐに見られるようにします。
地面モードに切り替え、不透明度を調整して空間的な位置関係を見せます。
クリップを再生したままカメラを動かし、動画がWebページ上のオーバーレイではなく、3Dシーンの一部であることを示します。
最後に、同じ組み合わせをもう一度オフラインで読み込み、実際のカメラ、共有画面、記録された点検映像などで合成ソースを置き換えられることを説明します。

証拠をピクセルではなくXYZの点として検証できる状態に保つ必要があるなら、時系列LiDARとMCAPのアーキテクチャを使いましょう。比較が静的で計測に基づくものなら、まずはIFCと点群によるScan-to-BIMの位置合わせから始めてください。

IFCと動画を3D地形上に配置：インタラクティブな施工デモ