Revitで作成した3DデータをPlayCanvasへインポートする

**[更新]2023/03/31に記事内の情報を大幅にアップデートしています。**
**[更新・移行 2023/05/15]当記事は、最新情報に更新のため[こちらに移行](https://support.playcanvas.jp/hc/ja/articles/17150781734297)しました。**

# はじめに
BIM系CADソフトの**Revit**を使用し作成した3Dモデルデータを**PlayCanvas**で活用する方法をご紹介します。

現状、PlayCanvasはFBXとOBJデータをインポート可能な状態で、BIMデータに含まれるカスタムプロパティなどの独自データを入れることができません。
ただし、3D形状やマテリアルに関しては階層構造を維持しFBXとして保持できますので、その点について見ていこうと思います。
また、Blenderを挟んで .ifc データをFBXにエクスポートし、PlayCanvas上へインポートする方法もご紹介します。

 - **Revitとは**
 - **Revitでモデリング**
 - **FBXにエクスポート**
 - **PlayCanvasとは**
     - PlayCanvasで実行するメリット
 - **PlayCanvasへインポートについて**
     - FBXをアップロード
     - .ifcデータをPlayCanvasへインポート
     - Blenderアドオンのインストール
     - BlenderからFBXにエクスポート
     - PlayCanvasへインポート
 - **データ内容を確認する**


# Revitとは
Autodesk社が開発している建築設計・建築情報モデリング(BIM)のCADソフトです。
建物の設計・施工に必要な設計情報を一元的に管理し、自動的に3Dモデルや図面を生成することができます。
建築設計、エンジニアリング、施工などに役立つ機能が用意されており、建築業界を中心に幅広い分野で使われています。


# Revitでモデリング
シンプルな建造物をモデリングします。
扉や窓、階段、ガラス等とマテリアルの設定を行っています。
![Revit01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/c35fdb8f-2318-60a9-5f61-ac8430f57eb3.png)


# FBXにエクスポート
BlenderやMaya等のDCCツールと違い、FBXへ保存する際の詳細設定等はありません。
![Revit02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/8870639d-8dab-e945-e20d-ab2c4ebf023d.png)


# ■PlayCanvasとは

JavaScriptsで作られたHTML5/WebGLで動作するゲームエンジンです。そのため、HTML5/WebGL向けコンテンツが簡単に作れます。

インストールの必要もなく、開発から公開までWebブラウザ一つで動くクラウドにホストされるため、URLにWebブラウザからアクセスすることで複数人で開発、公開したコンテンツを一緒に遊ぶことも可能です。

3Dゲームやアニメーションのほか自動車コンフィギュレーター、建築CADビューワー、オンライン展示会など幅広い業界にも活躍を見せています。

https://playcanvasjp/

## PlayCanvasで実行するメリット

PlayCanvasにインポートすることで、作成した建築モデルをWeb上で3Dビジュアライゼーションが可能になります。
これにより、建築物の外観や内部の構造をWebからいつでもで確認できるため、毎回ビルドすると言う手間もなく活用することができます。

プロジェクトを一つ作成すれば、プロジェクトを複製して他建築モデルに差し替えることもできます。
プロジェクトを再利用することで作業効率が向上し、プロジェクトのコストを抑えられます。

今回のハンズオンでは、インポートした3Dモデルの建築を一人称視点でバーチャル体験することができるものになっています。


# PlayCanvasへインポートについて
赤枠の **[NEW+]** をクリックして、プロジェクトを新規作成します。
![Revit04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/58ac27ce-b56b-32af-ec12-907ebc772071.png)

**Model Viewer** を選択し、 **DETAILS** に任意のプロジェクト名を入れ、 **CREATE** クリックで作成します。
![Revit05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/0d225c17-3514-aeb1-c424-d39bf5ae9f00.png)

新規作成されたプロジェクトのページへ遷移したら、 **EDITOR** をクリックし、エディターを開きます。
![Revit06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/41e8374c-66fb-b604-ebd6-fd8239ce3872.png)

シーン選択のポップアップが出ますので、既存にあるシーンを選択します。
ビューポート中央にPlayCanvasのロゴ3Dオブジェクトが既に置かれていますが、オブジェクトを選択し、エディタ右側のインスペクター欄の **Enabled** のチェックを外し、非表示にしておきましょう。
![Revit07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/6d8dbbbb-e462-55e5-0d89-802ac70c7229.png)

## FBXをアップロード
ASSETSの横にある **＋ボタン** をクリックするとUploadが選択できます。
![Revit08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/7327d32f-472e-24d8-e74c-0c362182e43f.png)

RevitからFBX化したデータの **名称** と **階層構造** を維持した状態でPlayCanvasへインポートできました。
ただし、マテリアルの情報を含んでいないので、任意で設定していく必要があります。
![Revit09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/52b0fa16-5914-e1d1-1ca5-f891eb0b06bc.png)

## .ifcデータをPlayCanvasへインポート
まずは、Revitから **.ifc** へエクスポートします。
![Revit03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/7df8ef4b-9219-8cbc-9d24-3e8a6cc35fd4.png)

## Blenderアドオンのインストール
下記サイトより、お使いのBlenderバージョンに合わせてダウンロードしてください。
https://blenderbim.org/
または以下からダウンロードください
http://ifcopenshell.org/ifcblender
![Revit10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/e2152cb1-b78e-cca7-2900-595ea0d72f30.png)

アドオンが正常に機能していれば、インポート欄に **.ifc** が選択できるようになっています。
![Revit11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/0235dee0-7bd0-0896-0b4a-5222e4f1a338.png)

マテリアル情報が保持され、且つifcカスタムプロパティ一覧も確認できます。
![Revit12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/c683bf41-4684-3f54-3620-363a8adc77c4.png)


## BlenderからFBXにエクスポート
必要なオブジェクトを選択し、下記のようにFBXエクスポート設定ください
![Revit13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/f4a78626-458d-fdea-86af-cc547ad3ae33.png)


## PlayCanvasへインポート
Revitからエクスポートした **.ifc** をBlenderを介し **.fbx** にしたデータをPlayCanvas上へインポートします。
手順は先程のアップロード方法と同じです。
各オブジェクトにマテリアルが反映されてインポートされているのが確認できます。
![Revit14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/341892/153ca784-3c57-6ffa-4405-dd19b4fdef1f.png)



# まとめ
ゲーム開発エンジンとして開発されているPlayCanvasでは現状、カスタムプロパティを入れることができませんが、3DCAD系のソフトで構成された3Dモデルをビジュアル要素として活用することは十分可能かと思います。
今後もエンジンの開発は続いていきますので、近い将来に色々な拡張子をアップロードできるようになるかもしれません。請うご期待ください！