1. 「pixiv/three-vrm」を使用する

以下のライブラリを使うことで,3DCGモデルを読み込むことが出来ます。

pixiv/three-vrm

lab.js Buildeで読み込む方法については以下でも解説しています。

pixiv/three-vrmと連携する

今回は,A-Frameでpixiv/three-vrmを読み込みます。以下のコンポーネントを使わせていただきます。紹介されている使用方法をlab.js でやってみたいと思います。

https://github.com/binzume/aframe-vrm

2. 「vrmモデル」をstaticフォルダにアップロード

動作確認用のアセットをダウンロードしてください。今回は,ニコニ立体ちゃん「AliciaSolid.vrm」ファイルを使います。利用時はそれぞれのモデルのライセンスに従ってください。

ニコニ立体ちゃん特設サイト - ニコニ立体

VRMの詳細は総務省の以下のページの資料の8-4-1と8-4-2をご確認ください。

総務省|Web3時代に向けたメタバース等の利活用に関する研究会|Web3時代に向けたメタバース等の利活用に関する研究会(第8回)

まずは,ローカルサーバーでlab.js Builderを立ち上げてください。

Untitled

「Static」フォルダに「AliciaSolid.vrm」をアップロードしてください。