More than 1 year has passed since last update.

Blenderで作成した建築3DモデルをPlayCanvasでバーチャル体験してみよう

Last updated at 2023-03-31Posted at 2020-03-16

[更新]2023/03/31に記事内の情報を大幅にアップデートしています。

はじめに

この「建築不動産xPlayCanvas！仮想万博作りたい人向けハンズオン」は、
2020年7月1日～(作品提出締切同年5月31日)から開催された 仮想万博 にPlayCanvasのシーンをアップするために必要な手順を説明していきます。

■PlayCanvasとは
- PlayCanvasで実行するメリット
■Blenderでの設定
- 3Dモデルの構造(動くオブジェクトと固定オブジェクトで分ける)
- マテリアル設定
- FBXのエクスポート設定
■PlayCanvasプロジェクトのフォーク
- プロジェクトのフォーク
- PlayCanvasエディターの説明
■PlayCanvasで3Dmodel設定
- FBXのデータインポート
- ビューポートへ表示
- MeshColliderの設定
■コード説明
- 自動ドアの開閉アニメーション
  - 扉の開くアニメーションを追加する
  - ドアを開閉するスクリプトを追加
- 追加したスクリプトについて
■PlayCanvasのアニメーションについて
■作成したプロジェクトを公開する
- プロジェクトのパブリッシュ

※PlayCanvasのアカウントが作成済みであるという前提で行います。

■PlayCanvasとは

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

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

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

PlayCanvasで実行するメリット

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

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

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

■Blenderでの設定

3Dモデルの構造(動くオブジェクトと固定オブジェクトで分ける)

今回は必要最低限の要素にまとめます。

メッシュ単位でマテリアルを設定し、動くオブジェクト、動かないオブジェクトで結合します。

なるべくオブジェクトはまとめた方がドローコール数の削減になり表示速度がスムーズになります。
この時、オブジェクトの原点はワールド位置[0, 0, 0]、回転[0, 0, 0]、スケール[0, 0, 0] にしてください。

マテリアル設定

今回はUV展開は行わず、メッシュに基本的なカラーとスペキュラーを設定しています。
Blederの場合はプリンシパルBSDFを使用します。PlayCanvasは各3Dソフトのデフォルトマテリアルの設定を引き継げます。

建築物のモデリングではソフトシェーディングを適用した場合、エッジをはっきり見せたい部分にベベル処理やエッジ追加を行います。
モデリング、マテリアルの設定が完了したら、FBXのエクスポートを行いましょう。

FBXのエクスポート設定

エクスポート設定は下記のように設定してください。

※FBX変更後にテクスチャやfbxのパスを変更しない(テクスチャのリンクが切れるため)

■PlayCanvasプロジェクトのフォーク

こちらのURLのプロジェクトをフォーク(複製)します。
https://playcanvas.com/project/669054/

このプロジェクトは、一人称視点＆キャラクターコントロールがセットされているプロジェクトです。

プロジェクトのフォーク

フォークボタンをクリックし、任意のプロジェクト名を入力後、enterキーもしくはforkボタンをクリック

複製されたプロジェクトが開きます。
EDITOR ボタンをクリックすると、PlayCanvasのビジュアルエディターが開きます。

SCENES選択画面の Untitled をクリックします。

PlayCanvasエディターの説明

PlayCanvasはスクリプト作成以外の作業をこのEditorから操作することができます。
Editorの構成は以下のようになっています。

各要素は以下のとおりです。

シーン(SCENE)
シーンビューには、制作しているのシーンが表示され、自由な位置・角度から眺めることができます。
インスペクター(INSPECTOR)
シーンの中で選択中のオブジェクトのプロパティなどを表示・編集するためのビューです。
座標やメッシュといった見た目上のものから、衝突判定や物理制御に関するパラメーターなどもあり、ユーザーが定義する要素がここに表示されます。
ヒエラルキー(HIERARCHY)
シーン内に存在するオブジェクトの一覧が表示されます。
編集中のシーン内でオブジェクトをコピー/ペーストしたり、適切な名前をつけて整理することもできます。
アセット(ASSETS)
制作中のプロジェクト（ゲーム全体）に含まれるモデル、スクリプト、グラフィックやサウンドなどのデータ、その他のリソースがファイル単位で表示されます。
メニュー(MENU)
シーンのビューモードやプロジェクトセッティング等の作業が行えます。

■PlayCanvasで3Dmodel設定

プロジェクトのHIERARCHYを見ると Level という室内モデルが既に入っています。

右上の Launch ボタンをクリックし、実行画面を確認してみましょう。

W,A,S,Dキーで移動、スペースキーでジャンプします。

FBXのデータインポート

PlayCanvasのASSETS欄に新規で BuildingModel とい言う名前でフォルダを作成します。

BuildingModelを選択した状態で、＋ボタン の Add Assets から Upload で、データをインポートもしくはローカルフォルダからドラック＆ドロップでASSETSにインポートします。

FBXのマテリアル設定が正しく行えていると、カラーやスペキュラー強度が引き継がれた状態でマテリアルが展開されます。
また、FBXは自動でJavaScriotが解読可能なJSON形式へ自動変換されます。FBX自体は使用しないので削除しても構いません。

ビューポートへ表示

Level と Camera モデルは制作の邪魔になるため、削除もしくは Enabled のチェックをFalseに外してください。

ASSETS内の〇〇〇.jsonをシーンビューへドラック＆ドロップしてください。

3Dソフト上で設定した原点情報を元に表示されますので、例えばオブジェクトの原点がオブジェクトを中心に設定されてる場合、PlayCanvasのシーンビュー上の中心(位置0,0,0)に表示されます。

各オブジェクトをシーンビューにアップしたらオブジェクト内を歩けるように設定していきます。

MeshColliderの設定

各建物オブジェクトのINSPECTER内のADD COMPONENTから Collision と Rigit Body を選択します。

COLLISIONのTypeをMeshに変更しAssetsに同じオブジェクトを選択すると、そのオブジェクトの形状のCollisionになります。

これで建物内を自由に移動することが出来るようになりました。
Lauchで確認してみましょう。

■コード説明

ここではシンプルなアニメーション制御(自動ドアの開閉)に関する説明を行います。

自動ドアの開閉アニメーション

ドアも COLLISION と RIGID BODY を追加します。
COLLISIONのTypeは Mesh 、RIGID BODYのTypeは Kinematic にします。

扉の開くアニメーションを追加する

ADD COMPONENTをクリック
Animationを選択
Add Assetsをクリック
アニメーションを選択し。ADD SELECTIONをクリック
DONEをクリック
Activate・Loopのチェックを外します。

ドアを開閉するスクリプトを追加

ADD COMPONENTからScriptコンポーネントを追加します。
ADD SCRIPTをクリックし、doorというスクリプトを追加します。
Select Entityをクリックします。
PlayerのEntityをクリックします。

これで自動ドアを作成するためにスクリプト・アニメーションの設定は完了です。

追加したスクリプトについて

このスクリプトは、ドアに、属性で指定をしたエンティティが触れたらドアを3秒開けるというスクリプトになります。

今回使用した主な処理は以下の通りです。

イベントハンドラーについて
https://developer.playcanvas.com/en/api/pc.EventHandler.html
AnimationComponent
https://developer.playcanvas.com/en/api/pc.AnimationComponent.html
CollisionComponent
https://developer.playcanvas.com/en/api/pc.CollisionComponent.html
RigidBodyComponent
https://developer.playcanvas.com/en/api/pc.RigidBodyComponent.html

 /*jshint esversion: 6, asi: true, laxbreak: true*/
const Door = pc.createScript('door');
Door.attributes.add("player", { type: "entity" })

Door.prototype.initialize = function () {
    const ANIMATION_NAME = "open" // ※アニメーション名を指定
    const animation = this.entity.animation.getAnimation(ANIMATION_NAME)
    const duration = animation.duration
    this.rayEnd = {x:1, y:1, z:1}
    this.isOpen = false
    this.timer = 0
    
    this.entity.on(`door:open`, () => {
        this.entity.rigidbody.enabled = false
        this.entity.animation.speed = 0.5
        this.entity.animation.play(ANIMATION_NAME)
        this.isOpen = true 

    })
    
    this.app.on(`door:close`, () => {
        const result = this.app.systems.rigidbody.raycastFirst(this.entity.getPosition(), this.rayEnd)
        if(result !== null){
            this.timer = 0
            return
        }
        this.entity.rigidbody.enabled = true
        this.entity.animation.speed = -0.5
        this.entity.animation.play(ANIMATION_NAME, duration)
        this.isOpen = false
    })
    
    this.entity.collision.on("collisionstart", (e) => {
        const { other } = e
        if (other.name === this.player.name && !this.isOpen) {
            this.entity.fire(`door:open`)
        }
    })
};

Door.prototype.update = function(deltaTime){
   if(!this.isOpen) return
   this.timer += deltaTime 
   if (!this.entity.animation.playing && this.entity.animation.duration +  this.timer > 3) {
        this.app.fire(`door:close`)
        this.timer = 0
    }
}

■PlayCanvasのアニメーションについて

PlayCanvasのアニメーションに制御ついては、こちらの記事にアニメーションの制御について書いた記事がありますのでそちらをご参照ください。
【PlayCanvas】スクリプトによるアニメーション制御・順再生・逆再生・ループ

■作成したプロジェクトを公開する

完成したプロジェクトをパブリッシュして、みんながプレイできるURLを生成します。

プロジェクトのパブリッシュ

左のメニュー、またはシーンの左上の Manage Scenes から以下のPublish画面を開きます。

PUBLISH TO PLAYCANVAS を選択して、一番下の PUBLISH NOW をクリックしてビルドは完了です。

発行された実行URLには、PC・スマホ・VRデバイスのWebブラウザがあれば、PlayCanvasにログインする必要もなくコンテンツを共有することができます。

以上で完了です。
お疲れさまでした。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up