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の設定アイコン(右端)をクリックします。

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

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

<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コンポーネントを追加します。