ちょうど（執筆日の）昨日, 3Dアバターモデルを簡単にWebアプリケーション上で扱える 開発者向けライブラリ「pixiv three-vrm」}がピクシブ株式会社からオープンソースで公開されました。
「pixiv three-vrm」は、人型3Dアバターモデルのデータを扱うためのフォーマットである「VRM」を読み込み、「Three.js」を使ってWebブラウザに表示するためのライブラリです。
@pixiv/three-vrm
絶妙なタイミングなので、急遽アバターをモーションキャプチャに合わせて動かすというサンプルの作り方を掲載したいと思います。
締切直前なので、解説は今までより大雑把になり、少しコピペテックの方針からずれてしまうかもしれませんが、おまけということでご容赦ください。
まずローカルでthree-vrmのサンプルを動かします。以下のURLから「three-vrm.js」「Source code(zip)」をダウンロードします。
▲図5.1: three-vrm をダウンロード
ダウンロードした「three-vrm-0.1.1.zip」ファイルを適当なフォルダに解凍します。こちらにはビルド済みのthree-vrmのJavaScriptファイルが含まれていないので、解凍したフォルダ直下に「lib」フォルダを作成し、もう一つダウンロードした「three-vrm.js」ファイルを置きます。ここまで作業すると以下のようなフォルダ構成になっているはずです。
▲図5.2: ここまでのフォルダ構成