Web上でLive2Dを使用

Live2D 開発

Live2D公式からは、様々な媒体でモデルを使うためのSDKが提供されている。 そのうちの一つであるLive2D Cubism SDK for Webを使ってみた。インストールは以下のサイトから行える。

https://www.live2d.com/sdk/download/web/

ダウンロードしたら、READMEの手順に従い、Samples/TypeScript/Demo上でコマンドを実行するとプレビューできる。

npm install
npm audit fix
npm run build
npm run serve

キャラクターの視線がマウスに追従したり、表情やポーズが切り替わる様子が確認できた。

次はLive2DモデルをAstro上で表示するためのコンポーネントを作成したい。