[2026/9/3]

[WEB App] IFC Viewer — web-ifc WASM によるブラウザ完結型建築BIM IFCファイル3Dビューア＆GLBコンバーター

IFC Viewer — Browser-based IFC/BIM 3D Viewer

IFC2X3・IFC4・IFC4X3の建築BIMデータをブラウザ内で3D表示するIFCビューアです。

web-ifc（IFC.jsプロジェクトの中核WASMエンジン）をパーサーとして使用し、サーバーへのファイルアップロードは一切不要で、すべてブラウザ内で完結します。GLBファイルへのエクスポートにも対応しています。

GitHub - ThatOpen/engine_web-ifc

web-ifc: The emscripten interface for the IFC parser that allows you to read and write IFC files in the browser, at native speeds.

github.com

ツール

IFC Viewer

web-ifc WASMによるIFCファイルの3D表示。タイプ別要素ツリー、プロパティ表示、GLBエクスポート対応。

lain-lab.com

スクリーンショット

IFCファイルの表示:

動画 (GIF)

Sample data

サンプルデータは「STEP Tools, Inc.」さんのサイトからお借りしています。
「STEP Tools, Inc.」はCAD・CAM・BIM分野のデータ交換標準規格に特化したソフトウェア開発キット（SDK）およびツールを提供する企業のサイトです。

STEP Tools, Inc. - Digital Thread, STEP and IFC Solutions

We are preparing the Version 21 release of our STEP and IFC programming libraries, scheduled for this summer. This version will introduce support for the latest STEP and IFC standards. They expand our meshing and viewing with better algorithms, benefit from extensive testing, and include many performance improvements. We are also expanding our supported platforms to include Windows on ARM64 and Visual Studio 2026.

www.steptools.com

特徴

IFC2X3 / IFC4 / IFC4X3 対応

web-ifcが対応する全IFCスキーマバージョンをサポート。ファイルヘッダからスキーマを自動検出して表示します。

タイプ別要素ツリー

IFCファイルに含まれるIFCWALL、IFCSLAB、IFCFURNISHINGELEMENT等のBIM要素をタイプ別に分類し、右パネルにツリー表示。クリックでタイプ別ハイライト表示。

プロパティ表示

3Dビューポート上でメッシュをクリックすると、そのBIM要素のexpressID、タイプ名、各種属性がプロパティパネルに表示されます。

エッジ表示

EdgesGeometryによる建築図面風のワイヤーフレーム表示。ON/OFF切り替え可能。

透過モード

全メッシュを半透明にして建物内部の構造を確認できます。

ブラウザ完結

ファイルはブラウザのメモリ内でのみ処理されます。外部サーバーへのアップロードは一切ありません。

GLBエクスポート

Three.js GLTFExporterでGLBファイルをダウンロード。IFC→GLB変換ツールとしても使えます。

自動カメラフレーミング

建築スケール（数十〜数百メートル）のモデルに対応した自動カメラ配置。near/farクリッピングも自動調整。

広告なし・トラッキングなし

広告、トラッキング、外部サーバーへのデータ送信は一切ありません。静的ファイルのみで構成されています。

使い方

IFCファイルをドロップ
- 左パネルのドロップゾーンまたはビューポートにIFCファイルをドラッグ＆ドロップします。クリックでファイル選択も可能です。
3Dプレビュー
- パースが完了すると自動的に3D表示されます。マウスドラッグで回転、スクロールでズーム、右ドラッグで平行移動。
タイプ別フィルタ
- 右パネルの要素ツリーでタイプ名をクリックすると、そのタイプのみハイライト表示されます。再クリックで解除。
プロパティ確認
- ビューポート上で部材をクリックすると、右下のプロパティパネルにBIM情報が表示されます。
表示オプション
- 左パネルのDISPLAYセクションでエッジ表示、透過モード、グリッド表示をトグルできます。
GLBダウンロード
- 「DOWNLOAD GLB」ボタンでGLBファイルをダウンロードします。

技術スタック

Astro — ページ構築
web-ifc v0.0.77 — IFC C++パーサーのEmscripten WASMビルド（IFC2X3/IFC4/IFC4X3対応）
Three.js r160 — BufferGeometry, OrbitControls, EdgesGeometry, Raycaster, GLTFExporter
vanilla JavaScript — DOM操作、ドラッグ＆ドロップ、ファイル処理

開発の経緯

lain-lab.comのCAD系ツール群（STEP Viewer、DXF 3D Viewer、3D Model Viewer）の拡張として、建築BIM分野のIFCフォーマットに対応するビューアを新規作成。

web-ifcは「That Open Company」（旧IFC.js）が開発するC++製IFCパーサーのEmscripten WASMビルド。npmパッケージとして配布されているが、IIFE版のWASMパス解決（SetWasmPath）が機能しない問題があり、Init()のlocateFileハンドラで直接パスを指定する方式で解決した。マルチスレッド版WASMはSharedArrayBuffer/COOP/COEPヘッダーが必要なため、シングルスレッドモードで動作させている。

IFCタイプの数値ID→名前の逆引きマップが標準APIに用意されていなかったため、WebIFCオブジェクトのIFC定数を動的にスキャンして逆引きマップを構築する方式を採用。

更新履歴

[2026/09/03]: v1.0
- web-ifc WASM統合、IFCジオメトリ3D表示
- IFCスキーマ自動検出（IFC2X3/IFC4/IFC4X3）
- タイプ別要素ツリー、タイプ別ハイライト
- プロパティ表示（クリックでexpressID・属性参照）
- エッジ表示・透過モード
- GLBエクスポート
- 公開