やる気が出ないまま年を越しそう

こんにちは。やる気がないまま年を越しそうです。
最近は本職のほうでチームリーダーになったので、会社の人におすすめしてもらった色んな本を読んでいます。

更新してない間に wavebox 押してくださった方はありがとうございました！

アノの見た目

以前ブログであげた絵をらくがきに載せました。
あと服装を考えてた最中の絵も、このままだとお蔵入りしそうなので載せました。

アノのイメージを作っている

リンク先 2 枚目の絵で使ってるブラシ

情報増しブラシ - CLIP STUDIO ASSETS assets.clip-studio.com

イラスト・マンガ制作に役立つトーン、ブラシ、3Dデータなどの素材をダウンロードしたり、自作の素材をアップロードしたりできます。CLIP STUDIO PAINTなどのグラフィックソフトに読み込んで使えます。

雑にいい感じにできて好き。

サイトの更新

リンクプレビュー（？）を表示するようにした＆YouTube 埋め込みを軽量化した

上記の「情報増しブラシ」のように、リンク先のプレビューカード（正式名称がわからない）を表示するようにしました。
あと YouTube 埋め込み時、クリックしないと動画を読み込まないようにしました。
両方ともライブラリを導入してサクッとやっています。便利なライブラリがあって助かる。

クロノワール VRM ビューワー

クロノワールの VRM モデルを閲覧できるようにしました。

その他の設定

マウスまたはタッチ操作により、一定の範囲内でズームと回転ができます。
レスポンシブ対応のためにやや新しめの API を使っているので、古いブラウザだと正しく動かないかもしれません。なるべく最新のブラウザで見てください。

• mrdoob/three-js
• pixiv/three-vrm

というライブラリを使っています。

アニメーションは下記を使っています。

• VRMアニメーション7種セット（.vrma）

「このスクリプトを読み込むだけで同じように VRM モデルを表示できます！」という手軽なものができないかなーと今考えています。
そのためには three.js を内蔵したスクリプトにしないといけないと思うのでなんか重そうですが……。

今は three.js は CDN から読み込んでるんですけど、importmap なんて初めて使いましたね……。
こういうのが importmap なんですけど書いたことあります？

<script type="importmap">
  {
    "imports": {
      "three": "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js",
      "three/addons/": "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/",
      "@pixiv/three-vrm": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm@3/lib/three-vrm.module.js",
      "@pixiv/three-vrm-animation": "https://cdn.jsdelivr.net/npm/@pixiv/three-vrm-animation@3/lib/three-vrm-animation.module.js"
    }
  }
</script>

フロントエンドエンジニアとして働いてるとスクリプトを CDN から読み込むということが逆にほとんど無くて、本当に初めて使いました。
これは type="module" がついているどの script タグよりも前に書かないといけないみたいなんですよ。
でもそんなの面倒じゃないですか……？　普通に script タグ一つ読み込むだけでビューワー表示したいんですよね。

というわけでクロノワール VRM ビューワーのスクリプトを組み立て直しているところです。

おわり