#03 VRMお手軽ポーズ/風による揺れの再現

https://gyazo.com/640d11a16b607c6a608cc99ba9a8e21f

説明

プロトタイプ版 VRMお手軽ポーズで風のように髪を揺らす機能を開発しています。

操作 UI が実装途中なので公開は後日になります。

風による揺れの再現

モデルの写真を作成する際に動きがある画が欲しかったので風のように揺れ物を動かす機能を作成しました。

実装

仕組みとしては

VRMモデルのspringBoneの要素を取得する。

gravityDirに風の力のベクトルを加え正規化する

gravityPowerに風の力の値を加える

springBoneの集合はVRM.springBoneManagerを参照して取得することが出来ます。

ただ、gravityDirもgravityPowerもreadonlyなプロパティなので他のやり方を考えた方が良いかもしれません。

code:ts

private updateSpringBones() {

if (!(this.currentVRM && this.currentVRM.springBoneManager))

return;

this.currentVRM.springBoneManager.springBoneGroupList.forEach(element => {

element.forEach(node => {

this.applyWindForce(node);

});

}

private applyWindForce(node: VRMSpringBone) {

let vec = new THREE.Vector3(0, -1, 0);

vec.applyEuler(this.target.rotation);

let currentGravity = this.gravityDir;

currentGravity.add(vec);

node.gravityDir = currentGravity.normalize();

node.gravityPower = this.currentWindForce;

}

参考