shingoushori's dialy

音信号処理を専ら研究していた元博士後期課程の学生によるメモ

VRM を読み込んで ~ 🎃 がくるくるするようにサンプルコードを改造してみた

VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、さまざまなアイコンがくるくるするサンプルコンテンツに放り込んでみた ... 
やつを改造して、🎃 がくるくるするように改造してみました。Happy Halloween 🎃

VRMを [Drop VRM files here] すると、真ん中に放り込めるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。

Drop files here

 

  

 

                    

チョップ

改造するだけのはずが肝心のvrm読み込みでエラー。pixiv/three-vrmさんの更新で適合するthree.jsのバージョンが上がった事によるものでした。
危ない危ない。
three.jsを 0.106.2 -> 0.120.1 にあげただけで、たぶん問題なし。
他の記事のも更新しないといけない。この辺りのメンテナンス性は改善したいところ。

動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。MacChrome でだけ。

ライブラリは『pixiv three-vrm』です。
モデル使用に関する免責事項のお手本は、 https://facevtuber.com/ さん。

 

[参考文献]

HTML5 CanvasとWebGLでウェブフォントを扱う方法

@pixiv/three-vrm three-vrm-girl.vrm

examples of @pixiv/three-vrm blendshapes.html Control facial expression using blend shapes

【Nuxt.js】canvasを画像化する際にバックグランドカラーが表示されない【Javascript】

Canvas.toDataURL() - キャンパスをデータURIに変換する

Exporting to image #989

https://github.com/pixiv/three-vrm