IFC Viewer — web-ifc WASM によるブラウザ完結型 建築BIM IFCファイル3Dビューア
IFC2X3・IFC4・IFC4X3の建築BIMデータをブラウザ内で3D表示するIFCビューアを公開しました。
📒 ツール紹介ページ
🔗 https://lain-lab.com/featured/ifc-viewer/
⚙️ ツールページ
🔗 https://lain-lab.com/ifc-viewer
スクリーンショット
動画（GIF）
Sample data
サンプルデータは「STEP Tools, Inc.」さんのサイトからお借りしています。
何ができるか
・IFCファイルをドロップするだけで即座に3D表示
・IFC2X3 / IFC4 / IFC4X3 スキーマ対応
・タイプ別要素ツリー（IFCWALL, IFCSLAB, IFCFURNISHINGELEMENT等）
・メッシュクリックでBIMプロパティ表示（expressID、タイプ、属性）
・タイプ別ハイライト表示
・エッジ表示（建築図面風ワイヤーフレーム）
・透過モード（建物内部の構造確認）
・GLBファイルへのエクスポート
技術的なポイント
変換エンジンにweb-ifc（That Open Company / 旧IFC.jsプロジェクト）のWASMビルドを使用しています。C++で書かれたIFCパーサーをEmscriptenでWASMにコンパイルしたもので、ブラウザ内でネイティブ速度のIFCパースが可能です。
処理の流れ：
IFCファイルドロップ → web-ifc WASM でパース → StreamAllMeshes で頂点/インデックスバッファ取得 → Three.js BufferGeometry で 3D 表示
IFCタイプの数値ID→名前の逆引きマップが標準APIに用意されていなかったため、WebIFCオブジェクトのIFC定数を動的にスキャンして逆引きマップを構築しています。
IIFEビルドでは SetWasmPath() が機能しないため、Init() の locateFile ハンドラでWASMパスを直接指定。マルチスレッド版はSharedArrayBuffer/COOPヘッダーが必要なため、シングルスレッドモードで動作させています。
広告なし・完全ブラウザ完結
ファイルはブラウザのメモリ内でのみ処理されます。外部サーバーへのアップロードは一切ありません。広告もトラッキングもなし。静的ファイルのみで構成されています。
技術スタック
・Astro — ページ構築
・web-ifc v0.0.77 — IFC C++パーサーのWASMビルド（IFC2X3/IFC4/IFC4X3対応）
・Three.js r160 — BufferGeometry, OrbitControls, EdgesGeometry, Raycaster
・vanilla JavaScript — DOM操作、ファイル処理
開発ブログ
🔗 https://lain-lab.com/posts/astro-122-ifc-viewer/
CAD系ツール群
lain-lab.comでは他にもCAD・3D系ツールを公開しています。
3D Model Viewer — assimpjs WASMによる40+フォーマット対応ビューア
🔗 https://lain-lab.com/model_viewer
STEP / IGES 3D Viewer — occt-import-js WASMによるCADビューア
🔗 https://lain-lab.com/step-viewer
DXF 3D Viewer — dxf-parser + Three.jsによるDXFビューア
🔗 https://lain-lab.com/featured/dxf-3d-viewer/
すべてブラウザ完結・静的ファイルのみで動作します。
公開ツールリスト
