はじめに

2023年9月¹？11月²？くらいにIFC.jsが一新されて、Open BIM Components というライブラリに変わっていました。

もともと IFC.jsは web-ifc, web-ifc-three, web-ifc-viewer の3つのレイヤーで構成されていました。それが、IFCのパーサーである web-ifc はそのままで、ブラウザ上でIFCの3Dモデルを表示するビューアーである web-ifc-three, web-ifc-viewer が廃止されて Open BIM Components になったようです。
また、GitHubもIFC.jsからThat Openに名称が変わっています。ライブラリ全体の呼び名としてはThat Openとになったということでしょうか？でもそれだとちょっとわかりにくいので、ここではIFC.jsと呼ぶことにします。

その新しくなったIFC.jsでIFCのモデルを表示する最小構成を調べました。

engine_templates

公式ドキュメントはあるのですが、コードが部分的にしか掲載されていないので、実際に動かそうにもどうすればいいのかわかりませんでした。

そこで、ThatOpenのリポジトリを確認してみると ThatOpen/engine_templates に実際に動かせるコードがありました。

最小構成

engine_templates の templates/vanilla をもとにして、IFCを読み込んでモデルを表示する処理のみにすると以下になります。

main.ts

import * as OBC from "openbim-components"

// Three.js 準備
const viewer = new OBC.Components()

// シーン
const sceneComponent = new OBC.SimpleScene(viewer)
sceneComponent.setup()
viewer.scene = sceneComponent

// レンダラー
const viewerContainer = document.getElementById("app") as HTMLDivElement
const rendererComponent = new OBC.PostproductionRenderer(viewer, viewerContainer)
viewer.renderer = rendererComponent

// カメラ
const cameraComponent = new OBC.OrthoPerspectiveCamera(viewer)
viewer.camera = cameraComponent

await viewer.init()

// IFC読み込み準備
const ifcLoader = new OBC.FragmentIfcLoader(viewer)
await ifcLoader.setup()

// ファイル選択アイコン表示
const mainToolbar = new OBC.Toolbar(viewer)
mainToolbar.addChild(
  ifcLoader.uiElement.get("main"),
)

viewer.ui.addToolbar(mainToolbar)

IFCファイルを読み込んだ状態の画面はこんな感じです。

また、HTML, CSSなどの他のコードは GitHub に公開しているので、コード全体が見たい場合はそちらも見てもらえれば。

解説

簡単な解説です。

Three.js

Three.jsのドキュメントを確認すると以下のように書いてあります。

実際にthree.jsで何かものを表示できるようにするには、scene、camera、rendererの3つが必要です。

最初の const viewer = new OBC.Components() ～ await viewer.init() の部分は、このThree.jsでの処理に対応おり、3Dモデルを表示させるために必要な記述となります。Three.jsのセットアップ処理をOBCで行うと以下のようになるというわけですね。

const viewer = new OBC.Components()

// シーン
const sceneComponent = new OBC.SimpleScene(viewer)
sceneComponent.setup()
viewer.scene = sceneComponent

// レンダラー
const viewerContainer = document.getElementById("app") as HTMLDivElement
const rendererComponent = new OBC.PostproductionRenderer(viewer, viewerContainer)
viewer.renderer = rendererComponent

// カメラ
const cameraComponent = new OBC.OrthoPerspectiveCamera(viewer)
viewer.camera = cameraComponent

await viewer.init()

IfcLoader

次にIFCを読み込むための準備をしています。
IFCを読み込みにはパーサーであるweb-ifcを使用しており、そのためにはWASMモジュールの読み込みが必要です。以下ではそういったセットアップ処理を行っています。

const ifcLoader = new OBC.FragmentIfcLoader(viewer)
await ifcLoader.setup()

Toolbar

最後にツールバーを表示させ、そこにファイル選択ボタンを設置しています。これにより選択したIFCファイルの3Dモデルを表示させることができます。

const mainToolbar = new OBC.Toolbar(viewer)
mainToolbar.addChild(
  ifcLoader.uiElement.get("main"),
)

viewer.ui.addToolbar(mainToolbar)

まとめ

Open BIM Componentsの最小構成でした。

あまり調べきれていませんが、基本的なツール郡がコンポーネント化されているので、そこそこ簡単にBIMアプリケーションを作成できるらしいです。ちょこちょこ触って遊んでいきたいですね。

2023年9月にweb-ifc-viewerが非推奨になっている ↩
2023年11月にOpen BIM Componentsの初板?がリリース ↩

Open BIM Components(IFC.js)の最小構成