第2回 IFC.jsまとめーIFCファイルをブラウザで表示する

皆様
こんにちは
AMDlabの秋山です。

第2回目は、web-ifc-threeでIFCファイルを読み込み、ブラウザに表示する方法を解説します。
web-ifc-threeとは、ifcのデータをロードし、Three.jsのシーン(ビュー)を生成するライブラリです。利用するときは、このパッケージだけをインストールすれば、web-ifcのコアとなるロジックが含まれたWebAssemblyも引っ張ってくるので、実質このライブラリが利用する側にとってはメインのライブラリとなります。

実はブラウザでIFCを表示するだけであれば、ソースコードが公開されており簡単に表示することが可能なのです。
こちらでデータのダウンロードができますが、今回は使用せず作成してみようと思います。環境はWindowsです。

手順は以下の9ステップです。

  1. Node.jsのインストール
  2. IFC.js関連のライブラリのインストール
  3. バンドラー(Rollup)のインストール
  4. htmlファイルの作成
  5. cssファイルの作成
  6. バンドル用のコンフィグファイルの作成
  7. WebAssembly(WASM)の使用
  8. Three.jsファイルの作成
  9. bundle済ファイルの作成
  10. ローカルサーバーを立ち上げる

1.Node.jsのインストール

Node.jsとはサーバサイドのJavascript実行環境です。
簡単に言うと、ブラウザ上でしか動かないJavaScriptを、PythonやRubyのようにコマンドラインツールなどで動くようにしてくれるものです。

Node.jsをインストールするメリットは下記になります。

1.Javascriptでサーバーを構築し、Webアプリケーションを作成できる
2.npmやyarnとったパッケージマネージャーの付属により、Javascriptで使用できるライブラリを管理できる
3.モバイルやデスクトップアプリケーションを作ることができる(Elecrtonを使ったアプリケーションの作成はこちらの記事を参照ください)

Node.jsのインストールの仕方は以前書いたこちらの記事を参照してください。

2.IFC.js関連のライブラリのインストール

下記のライブラリをインストールします。

    • IFC.js
    • Three.js

これらのライブラリはコマンドプロンプト上で、 npm installnpm i と省略もできます)というコマンドでインストールします。
コマンドプロンプトに以下を入力します。

npmをinstallを実行するとpackage.jsonが作成されます。
package.jsonは、json形式で記載されたインストールしたパッケージを管理するための目録です。中には、プロジェクト名・バージョン・コマンド・依存関係などのデータが入っています。
以下がpacakage.jsonの中身です。

 

3.バンドラー(Rollup)のインストール

バンドラーとは、モジュールを文字通りひとまとめにする(bundle)ツールです。
ひとまとめにするモジュールの形式はバンドラーによって異なります。バンドラーはrollup以外にも以下のようなものがあります。
・webpack
・Parcel
・Browserify
今回のアプリケーションではrollupをバンドラーとして使ってみます。

4.htmlファイルの作成

index.htmlという名前のhtmlファイルを作成します。

[構成]
<canvas>three.jsのシーンのレンダリングに使用します。
<input>IFCファイルを読み込みます。
<script>bundle.jsファイル(関連するjsをバンドルして一つにしたファイル)を読み込みます。

5.cssファイルの作成

style.cssという名前のcssファイルを作成します。

[構成]
キャンバスをフルスクリーンにする記述です。

6.バンドル用のコンフィグファイルの作成

rollup.config.jsという名前のrollupの設定ファイルを作成します。

[構成]
rollupを使用して、app.jsから紐付くファイルをバンドルしたbundle.jsを作成する記述です。

7.WebAssembly(WASM)の使用

WASMはC++で書かれているブラウザ上で動くバイナリコードになります。こちらを使用することでブラウザ上でプログラムを高速実行することができるようになります。
node_modulesディレクトリ配下にインストールされたweb-ifc.wasmを、プロジェクト内のwasmディレクトリにコピーします。
wasmファイルはこちらからダウンロードして配置してもいいです。

8.Three.jsファイルの作成

app.jsという名前で3Dシーンを作成します。
Three.js内のコードの説明は前回の記事で説明していますので参考にしてください。

ここのスクリプトで重要なことは、
// IFCの読み込みを設定する箇所の

の引数にブラウザ上に表示させたいIFCのパスを指定することです。
今回はwasmフォルダ内にサンプルモデルを入れています。
サンプルモデルはこちらよりダウンロードください。

9.バンドル済みファイルの作成

rollup.jsを使用して、app.jsに紐付くモジュールをバンドルさせるため、コマンドプロンプト上でrollup -cと打ち込みます。

フォルダ内にbundle.jsファイルが作成されたことを確認してください。

 

10.ローカルサーバーを立ち上げる

ローカルサーバーの立ち上げ方法として、2通り紹介します。
どちらかお好きな方でサーバーを立ち上げてください。

■コマンドプロンプトで立ち上げる
まず初めにコマンドプロンプト上でhttpサーバーをインストールします。
npm install -g http-serverと入力してください。
インストール後、動かしたいサイトのあるディレクトリ上でnpx http-serverと入力し、取得したURLをブラウザに入力します。

無事表示されました。

■VScode上でライブサーバーを実行する
ライブサーバーとは、簡単にローカルサーバーを立ち上げることのできるVScodeの拡張機能です。
こちらよりインストールしてください。

拡張機能のインストール方法を説明します。
まず初めに、VScodeのサイドバーから赤枠をクリックし拡張機能を表示します。

次に今回インストールしたいLive Serverを検索してください。

インストールをクリックすると、拡張機能欄にインストール済みの拡張機能が表示されます。

また、LiveServerのインストールが完了すると、右下にGo Liveという項目が表示されクリックします。

コマンドプロンプトの立ち上げと同じように、取り込んだオブジェクトが表示されると思います。

次回は、読み込んだオブジェクトに操作を加えていこうと思います。

BIM
IFC Revit
Tech
Javascript
ARTICLES