1. pixiv/three-vrmとは?

lab.js Builderに組み込めるライブラリを探していたのですが,以下のような3Dモデルも読み込めることが分かりました。

pixiv/three-vrm

three-vrmのプログラムについては以下のサイトを参考にさせていただきました。

#295 再生ボタン押すだけの3D入門#5 VRM嗤かすまで|ノートちゃん|note

2. lab.js Builderに環境をセットアップする

セットアップの方法はこれまでと同じです。lab.js Builderの設定アイコン(右端)をクリックします。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b3425e4c-2e06-4e12-986b-a8dfbe147740/Untitled.png

HTMLタグを選び,使用するライブラリのリンクを貼り付けます。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/563ff786-250c-425b-a580-0acd7db28c11/Untitled.png

具体的には以下のような感じです。

<script src="<https://unpkg.com/[email protected]/build/three.js>"></script>
<script src="<https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js>"></script>
<script src="<https://unpkg.com/[email protected]/examples/js/controls/OrbitControls.js>"></script>
<script src="<https://pixiv.github.io/three-vrm/lib/three-vrm.js>"></script>

次は,HTML Screenコンポーネントを追加します。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9dcfcb06-9f6c-4868-8697-eb702ffdb183/Untitled.png