VRM を読み込んで ~ ギターの画像入れてぐるぐるしよう

VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、ギターをぐるぐるします。
下の方の [Select or Drop files here] に画像を入れると、ギターっぽく斜めに出します。
これを [ぐるぐる] のスライダーでぐるぐるできます。

直接関係ないやつ(site表示,PNG書出,zangyou,チョップ)は過去の残しっぱなし。

Glitchは, むしろやりたかったこと。画像にglitchかけたかったのが本当のところ。

VRMを [Select or Drop files here] すると、zangyou をチョップする感じで読み込まれるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。

後ろのsiteがどんなurlにまで対応しているかは謎です。そのsiteを用いる上での権利やセキュリティについては、このコンテンツでは全く処理していません。このコンテンツを利用したことによるいかなる責任も負いません。自己責任でお願いします。

or Drop files here

チョップ

site

ぐるぐる

or Drop files here

動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 / 0.7.5 / 0.8.0 で自作したモデル。Mac の Chrome でだけ。
ギターを弾くようなモーションを作ろうとしてます。
それっぽくするのにすぐできなさそうだったので、とりあえずチョップです。
座標系や回転軸を見えるようにしないときついです。
ますます既存ツールで良いような。

ライブラリは『pixiv three-vrm』です。
モデル使用に関する免責事項のお手本は、 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を使って簡易な図形の描画

デザイナーでもできる。three.jsでwebGL 第2回「テクスチャー」

Three.js の球体のテクスチャに透過部分のある画像を使って表示

Three.js(Canvas) : ２平面(それぞれ裏表としてテクスチャ)、MeshBasicMaterial に overdraw: true をセットする意味と、Texture オブジェクトを onload で作成

three.jsで画像を表示する最小サンプル