#04 VRMお手軽ポーズ/カメラ目線

https://gyazo.com/d8fe0e39b823dbbe9dc213da9557d037

説明

プロトタイプ版 VRMお手軽ポーズでカメラ目線の機能を追加しました。

風の揺れの設定をUIに追加しました。

実験的機能の中身を本実装し、プロトタイプ版VRMお手軽ポーズの使い方へのリンクを配置しました。

カメラ目線の実装

pixiv/three-vrmにはlookAtの機能があるのでカメラ目線は非常に簡単に設定することができました。

また、公式にもサンプルがあります。

プロトタイプ版 VRMお手軽ポーズでは表情 -> カメラ目線のチェックボックスから設定できます。

デフォルトはONです。

実装

vrm.lookAt.targetに目線の対象となるTHREE.Object3Dを指定してください。

vrm.lookAt.autoUpdateで目線の更新の可否を設定できます。

ソースコード

code:js

// camera:THREE.Camera 今回はOrbitControlsで操作しているカメラ

currentVRM.lookAt.target = camera;

// 目線をターゲットに追従させ更新する

currentVRM.lookAt.autoUpdate = true;

実験的機能からの移動

いままで実験的機能に仮置きされていた物を移動しました。

ポーズをURLで共有

保存・共有 -> ポーズをURLで共有に移動しました。

また、画像の出力とポーズの出力のボタンの名前を少し変えました。

https://gyazo.com/b162e958f6100b11d0d84aef1556cc61

指の編集

指編集に独立して移動しました。

ここは改良予定です。

https://gyazo.com/f06fd6ed417c27310c178f5a38e84d9d

風の揺れ

環境 -> 風の強さ、環境 -> 揺れの停止に移動しました。

https://gyazo.com/b7ef02bb84730be20a27214354299cbc

次は肩回りのIKをなんとかしたり、ライティングをいじってみます。

あと、pixiv/three-vrmすごい便利ですね…。

参考