VRM を読み込んで ~ ギターの画像入れて弾いてる振り右手だけ
VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、ギターを弾いた振りします、右手だけ、がしょがしょと。
上の方の [Select or Drop files here] にVRMを入れると、ギターを構えてる風の両腕になるはずです。
pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。
[チョップ] のスライダーで右手でがしょがしょできます。
下の方の [Select or Drop files here] に画像を入れると、ギターっぽく斜めに出します。
これを [ぐるぐる] のスライダーでぐるぐるできます。
たくさん並んでるテキストボックスで、両腕の関節の角度を調整できます。
いい数値が見つかったら教えてください。
[Select or Drop files here] しても動作しない場合は、ページを再読み込みすると次は動作するかもしれません。
直接関係ないやつ(site表示,PNG書出,zangyou,チョップ)は過去の残しっぱなし。
後ろのsiteがどんなurlにまで対応しているかは謎です。そのsiteを用いる上での権利やセキュリティについては、このコンテンツでは全く処理していません。このコンテンツを利用したことによるいかなる責任も負いません。自己責任でお願いします。
or Drop files here
RightShoulder
RightUpperArm
RightLowerArm
RightHand
LeftShoulder
LeftUpperArm
LeftLowerArm
LeftHand
ぐるぐる
or Drop files here
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 / 0.7.5 / 0.8.0 で自作したモデル。Mac の Chrome でだけ。
ギターを弾くようなモーションを作ろうとしてます。
それっぽい動きを作り込むのは大変なので、右手だけ。2020年8月にできていたやつを、やっととりあえず出します。
音から自動で動かそうとも考えていて、先は長い。
ライブラリは『pixiv three-vrm』です。
バージョン 0.6.3 の cdn : @pixiv/three-vrm CDN by jsDelivr - A CDN for npm and GitHub を使っています。
モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。
[参考文献]
@pixiv/three-vrm three-vrm-girl.vrm
examples of @pixiv/three-vrm blendshapes.html Control facial expression using blend shapes
https://github.com/pixiv/three-vrm
Three JS:Geometryでオリジナルの形状を作ってみる
立方体の各面にテクスチャを貼る - three.js アプリ
デザイナーでもできる。three.jsでwebGL 第2回「テクスチャー」
Three.js の球体のテクスチャに透過部分のある画像を使って表示
