ThatOpenのIFCローダーをMacで動かす

 ThatOpenとはThatOpenは、BIM（Building Information Modeling）アプリケーションを構築するためのオープンソースライブラリの集合体です。

 プロジェクトの概要
 主要な特徴Three.jsやその他のライブラリをベースとした、ブラウザベースの3D BIMアプリケーションを簡単に構築できる事前作成済み機能を提供します。主な機能には以下があります：

IFCファイルの処理: IFCの読み込み、表示、ナビゲーション、編集、エクスポート

3Dビューア: ポストプロダクション、寸法表示、フロアプランナビゲーション、DXFエクスポートなど

多様な3Dフォーマット: その他の3D形式の読み込み、表示、ナビゲーション

 主要なライブラリ構成
 1. @thatopen/componentsBIMアプリケーション作成のためのコア機能のコレクション。Three.jsベースの3D機能を提供します。

 2. @thatopen/uiユーザーインターフェース要素の究極セット。ボタン、パネル、ツールバー、テーブル、入力フィールドなどのコアUIコンポーネントを提供。

 3. @thatopen/ui-obc@thatopen/componentsの多くの機能に対応する事前作成済みの機能コンポーネント。IFCファイル読み込みボタンから、アプリツール設定テーブル、モデル分類表示パネルまでを含みます。

 技術的特徴
 Web Components技術ブラウザAPIのWeb Componentsを使用して、独自のHTMLタグ（DOM要素）を定義可能。React、Angular、Vue、SvelteなどどこでもHTML要素として使用できる

 多様なプラットフォーム対応Web（HTML、CSS、オプションでReact、Angular、Vueなど）、Node.js（バックエンドアプリ）、React Native（モバイルアプリ）、Electron（デスクトップアプリ）

 プロジェクトの目標すべての人がBIMソフトウェアを作成できるようにし、すべてのソフトウェアが同じ言語で話せる分散型エコシステムを作ることで、お互いの問題解決のために共有、売買できるようにすることを目指しています。
つまり、ThatOpenは建築・建設業界向けのモダンで使いやすいBIMソフトウェア開発プラットフォームということですね！

torikasyu

サンプルの中のIFCロードを自分のMacで動かすと色々エラーが出たので対処方法のメモ

http://localhost:5173/packages/core/src/fragments/IfcLoader/example.html

 リポジトリをcloneするhttps://github.com/ThatOpen/engine_components

 yarnyarnが必要なのでインストールしておく。自分はvolta環境なので、

volta install yarn した

 パッケージをプレビルドするyarn build-libraries

 実行yarn dev

torikasyu

 Darwin用のプラグインがないエラー依存パッケージにDarwin非対応のバージョンが含まれている
yarn.lock、package-lock.jsonを削除する
node_modulesを削除する
yarn installする

torikasyu

 indexに何も表示されないexamplesという文字だけでリンクがない。

vite.config.ts内でサンプルにリンクするindexを作成している部分がある。

ここのディレクトリの区切りがWindows用になっているので変更する。
directory.match(/packages\\([^\\]+)/);

↓

directory.match(/packages[\/\\]([^\/\\]+)/);
const writeIndexHTML = () => {
  let links: string = "";
  const examplePaths = globSync("packages/**/src/**/example.html");
  for (const examplePath of examplePaths) {
    const directory = path.dirname(examplePath);
    const packageNameMatch = directory.match(/packages[\/\\]([^\/\\]+)/);

 解説 by Claude正規表現での \\ と \/\\ の違いを説明します：
\\ について
エスケープされたバックスラッシュ
JavaScriptの文字列内では \\ = 実際の \ 文字1つ
正規表現では Windows のパス区切り文字 \ にマッチ
\/\\ について
エスケープされたスラッシュ +

エスケープされたバックスラッシュ
JavaScriptの文字列内では \/\\ = 実際の /\ 文字2つ
正規表現では Unix/Linux の / OR Windows の \

にマッチ
この行の意味：
directory.match(/packages[\/\\]([^\/\\]+)/);
packages の後に / または \ が続く

([^\/\\]+) = / でも \ でもない文字が1文字以上
つまり packages/core や packages\core 両方にマッチ
なぜこうするのか：
クロスプラットフォーム対応
macOS/Linux: packages/core
Windows: packages\core
両方のパス形式に対応できる

torikasyu

謎のエラー

IFCをロードするとエラー
Unhandled Promise Rejection: TypeError: Missing field: "tolerancePlaneIntersection"
AIに聞いても検索してもわからない

対応策

いろいろ試行錯誤した結果、Mac（もしくはSafari？）では、web-ifcのwasmをネットワーク経由でダウンロードして動かすとエラーになるらしい。ローカルから読み込むようにしたら動作した。

resources以下にwasmディレクトリを作成して、下記コマンドでwasmをコピーする

% cp node_modules/web-ifc/web-ifc.wasm resources/wasm 
% cp node_modules/web-ifc/web-ifc-mt.wasm resources/wasm

/packages/core/src/fragments/IfcLoader/example.ts の、wasmのロード部分を変更する

await ifcLoader.setup({
  autoSetWasm: false,
  wasm: {
    path: "/resources/wasm/",
    absolute: false,
    // path: "https://unpkg.com/web-ifc@0.0.70/",
    // absolute: true,
  },
});

tamasbalogh

Hi there torikasyu-san!
I only created an account to express that I am very grateful for this post!!!!
Thank you, greetings from Hungary.
Tamas Balogh

torikasyu

うごいた