JavaScriptでVRMのモデルビューワーを作る[PlayCanvas]


# ※ 2020 1月
現在はこのようなスクリプトで読み込むことができます。

```javascript
/*jshint esversion: 6, asi: true, laxbreak: true*/

class LoadGlb extends pc.ScriptType {
	initialize () {
		// 1. ローカルのURLからglbファイルをインポートし、モデルを置き換える
		this.app.assets.loadFromUrl(this.url, 'container', (err, asset) => {
			// 2. 現在のモデルコンポーネントを削除
			this.entity.removeComponent('model')

			// 3. リソースを置き換える
			this.entity.addComponent('model', {
				type: 'asset',
				asset: asset.resource.model,
				castShadows: true
			})
            if(asset.resource.animations){
			    this.entity.removeComponent('animation')
		        this.entity.addComponent('animation', {
				    assets: asset.resource.animations
			    })
            }
		})
	}
}

pc.registerScript(LoadGlb)
LoadGlb.attributes.add('url', {
	type: 'string',
	default: 'http://localhost:5000/character3.glb',
})

LoadGlb.attributes.add('castShadows', { type:"boolean", default: true})

    
```
# はじめに
PlayCanvas アドベントカレンダー6日目です！

### PlayCanvasとは

PlayCanvasの開発はイギリスのPlayCanvas社（現在はSnapChatのSnap）が行っております。
<iframe width="800" height="480" src="https://www.youtube.com/embed/PS4oMLPyYfI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
公式ドキュメントによると

>PlayCanvasは、インタラクティブなウェブコンテンツ用のビジュアル開発プラットフォームです。作成するツールとウェブアプリは、どちらもHTML5を使用しています。 プラットフォームはウェブでホストされているため、インストールするものは何もなく、対応されているウェブブラウザを実行する任意のデバイスからアクセスできます。  

> https://developer.playcanvas.com/ja/user-manual/introduction/


# PlayCanvasでVRMのモデルビューワーを作る

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">PlayCanvasでVRM表示できた～！アウトラインはPlayCanvasのサンプルのToonを追加しました<br>ライトを受け付けなくて少しはまった...<a href="https://t.co/Yl6x8uUNDt">https://t.co/Yl6x8uUNDt</a></p>&mdash; はが (@Mxcn3) <a href="https://twitter.com/Mxcn3/status/1199992445162803200?ref_src=twsrc%5Etfw">2019年11月28日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


#### 1. BlenderでFBXに変換をして表示をする

PlayCanvasではFBXやOBJなどのエディター上でサポートされている形式であればそのまま表示できますのでBlederなどのモデリングツールで変換をする方法があります。現状PlayCanvasでモデリングツールを作る場合にはこの方法を取るとエディター上でVRMのモデルを表示することができます。

[VRoid→Blender→PlayCanvasでwebに3Dキャラクターを表示してみる
](https://qiita.com/shujimuna1102/items/15c5fde90e76f30e76dc)


### VRMのモデルを表示する

VRMはglTF2.0という形式がベースとなっており、GLBのモデルを読み込む事ができれば表示できます。

#### GLTFの読み込めるJavaScriptライブラリ
gltfが読み込めるライブラリは、Three.jsやBabylon.jsなど他にも様々存在します。これからライブラリを選定されている方は、んUnityなどの挙動なども網羅的にまとめられている@cx20さんのこのリポジトリを確認すると良さそうです。
PlayCanvasについてもこちらで比較されています。

![lib.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/6e74fd55-1d7e-37cd-f8da-d20d5a31544d.png)


GitHub ★ 120↑ [gltf-test](https://github.com/cx20/gltf-test) 

# PlayCanvas EditorでVRMを使う
### 1. PlayCanvasのエディターを使用するためにPlayCanvasに登録
[https://playcanvas.jp](https://playcanvas.jp)




### 2. 自分のプロジェクト一覧にアクセスをする
![Projet](https://user-images.githubusercontent.com/39250588/64595767-2aef4f80-d3a2-11e9-9e49-ff20b4b45ff1.PNG)

1. [https://playcanvas.com](https://playcanvas.com)にアクセスする
2. Projectsをクリックする

### 3. 新規プロジェクトを作成する
1. NEWボタンから新規プロジェクトを作成する
![new](https://user-images.githubusercontent.com/39250588/64595828-465a5a80-d3a2-11e9-98e4-411ca3744eb5.PNG)

### 4. Model Viewer Starter Kitを選択
- Model Viewer Starter Kit
- 
Model Viewer Starter Kitにはカメラやカメラを操作するスクリプトが最初から入っております。

![ModelViewer.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/17e24f10-2997-5836-97c9-8accd850510b.png)

### 5. シーンの選択画面の説明

作成したモデルビューワーを起動するとこのようなシーンを作成画面が出てきます。

![https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-Ln6IBXaqxl-ZPewffQr%2F-LngitHilFlR66-2BNhe%2F-LngitzvlqKuHtkwM4u6%2Fdemostart.png?generation=1567339817366292&alt=media
](https://blobscdn.gitbook.com/v0/b/gitbook-28427.appspot.com/o/assets%2F-Ln6IBXaqxl-ZPewffQr%2F-LngitHilFlR66-2BNhe%2F-LngitzvlqKuHtkwM4u6%2Fdemostart.png?generation=1567339817366292&alt=media
)

画面の説明としては以下のようなものになります。

① ここからシーンを選択してプロジェクトの編集ができます
② シーンを追加できます
③ BUILDSでは今までのビルド一覧が見られます
④ PUBLISHではPlayCanvasプロジェクトの公開ができる
⑤ VERSION CONTROLではバージョン管理をできます
⑥ シーンの削除をできます


### 6. モデルビューワーが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/42247842-4d94-48dc-72cb-2f425203ff7a.png)


### 7. 起動する

作成されたモデルビューワーの起動はLaunchボタンを押すと起動できます。
![kidou.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/8e8bc68e-1d6c-c655-5359-9440e4216257.png)

Launchボタンが押されると別タブでPlayCanvasゲームを起動することができます。

起動するとマウスやキーボードを使用してモデルをグリグル見ることの出来るビューワーが作られました。こちらのプロジェクトではデフォルトでマウスとキーボードを使用してモデルをグリグリ操作できるスクリプトが入っています。
![kidoudekita.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/1606e1a3-8233-8b9d-ce4b-81608e52947c.png)


# モデルビューワのモデルをVRMに置き換える
PlayCanvasで現在表示されているモデルをVRMのモデルに置き換える

![modelViewer2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/257048/9f447ef7-65b9-afe7-7945-ebf13271c3b4.png)



### vrmファイルを、glb形式に変更しアップロードしてください。
現状、PlayCanvasではglb形式のファイルをアップロードすることでモデルデータを表示できます。


<font color="OrangeRed">
PlayCanvas開発で参考になりそうな記事の一覧です。
</font>
<font color="OrangeRed">
入門

- [PlayCanvas入門- モデルの作成～ゲームに入れ込むまで](https://qiita.com/yushimatenjin/items/2a2c35fe7b1d08f9e361)
- [JavaScriptでスロットを実装する。【PlayCanvas】](https://qiita.com/yushimatenjin/items/e84c42da74df1eb07386)
- [3Dモデルのビューワーを3分で作る【初めてのPlayCanvas】](https://qiita.com/yushimatenjin/items/4b09c9e2076a0b2a6933)
</font>
<font color="OrangeRed">
応用
</font>

- [PlayCanvasのコードエディターでes6に対応する](https://qiita.com/yushimatenjin/items/a61a21c64c1c1a550dd4)
- [Gulpのプラグインを書いたらPlayCanvasでの開発がめちゃくちゃ便利になった](https://qiita.com/yushimatenjin/items/5f0f178e8a4ba4a5ee57)
- [PlayCanvas Editorに外部スクリプトを読み込む新機能が追加されたので開発方法を考える。- Reduxを組み込む](https://qiita.com/yushimatenjin/items/7a64220cceac66843d7d)
</font>
<font color="OrangeRed">
その他の記事はこちらになります。

- [React Native + PlayCanvasを使ってスマートフォンゲームを爆速で生み出す](https://qiita.com/yushimatenjin/items/7c7ad5d35473c11f32f2)
- [PlayCanvasのエディター上でHTML, CSSを組み込む方法](https://qiita.com/yushimatenjin/items/814b4a32db53397219df)
- [【iOS13】新しくなったWebVRの使い方 ](https://qiita.com/yushimatenjin/items/344d86b3d193e0a88567)
</font>

<font color="OrangeRed">
その他関連
- [PlayCanvasタグの付いた記事一覧](https://qiita.com/tags/playcanvas)
</font>


### PlayCanvasのユーザー会のSlackを作りました！
少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！

[日本PlayCanvasユーザー会 - Slack](https://t.co/IdSRIfJhN5?amp=1)