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

Last updated at 2023-01-20Posted at 2019-12-06

※ 2020 1月

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

/*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）が行っております。

公式ドキュメントによると

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

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

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

PlayCanvasでVRM表示できた～！アウトラインはPlayCanvasのサンプルのToonを追加しました
ライトを受け付けなくて少しはまった...https://t.co/Yl6x8uUNDt
— はが (@Mxcn3) 2019年11月28日

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

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

VRoid→Blender→PlayCanvasでwebに3Dキャラクターを表示してみる

VRMのモデルを表示する

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

GLTFの読み込めるJavaScriptライブラリ

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