VRM を読み込んで ~ さまざまなアイコンがくるくるするサンプルコンテンツに放り込んでみた
VRM - VR向け3Dアバターフォーマット - を読み込みます。
今回は、さまざまなアイコンがくるくるするサンプルコンテンツに放り込んでみました。
これまでは zangyou だけだった訳ですが、それは絵文字は愚かひらがなすら出せなかったんです、フォントの都合で。
どうせなら絵文字とか出したいですよね。で、すてきな紹介記事「HTML5 CanvasとWebGLでウェブフォントを扱う方法」に巡り会いましたので、VRM を放り込むだけでも楽しそうなのでやってみました。
VRMを [Drop VRM files here] すると、真ん中に放り込めるはずです。pixivのGitHubに three-vrm-girl.vrmっていうデモな3Dモデルさんがいらっしゃいますので、 [testModel] ボタンでご召喚できるようにしてます。
Drop files here
チョップ
動作チェックはhttps://vroid.com/ (Mac版) 0.7.2 と 0.7.5 で自作したモデル。Mac の Chrome でだけ。
ライブラリは『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に変換する
https://github.com/pixiv/three-vrm
