Cubism SDK for webでモデルをドラッグ状態以外でマウスに追従させたい

Cubism SDK 制作の質問やTips紹介
1

こんにちは。サイトにLive2dモデルを埋め込むため、色々と模索しているのですが、
ドラッグ状態ならモデルの目線や顔の向きがきちんと追従してきますが、
やりたいことは「ドラッグ状態でなくても」マウスに追従する動きです。
色々と情報を探したのですが見つからず、どなたかヒントをいただけないでしょうか。

2

こんにちは。
サイトにLive2Dを埋め込むということはSDK for Webでしょうか？
私はTypeScriptやWebの知見がないため詳しくないのですが、マウスの現在位置を取得するには、onmousemoveという関数が使えるようです。

Live2Dのサンプルではこの行で、onMouseMovedという関数の処理をマウスが動いたときにさせていることが分かります。
https://github.com/Live2D/CubismWebSamplesDev/blob/8078263b0eff10491436e5c830fbbaf8379d6413/Samples/TypeScript/Demo/src/lappdelegate.ts#L101
従いまして、lappdelegate.onMouseMoved関数の中身を書き換えればドラッグ状態でなくてもマウスカーソルに追従するようにできます。

試しにonMouseMovedの中身を以下のように書き換えてみたところ、上手くいきました。

function onMouseMoved(e: MouseEvent): void {
  // if (!LAppDelegate.getInstance()._captured) {
    // return;
  // }

  // if (!LAppDelegate.getInstance()._view) {
    // LAppPal.printMessage('view notfound');
    // return;
  // }

  // const rect = (e.target as Element).getBoundingClientRect();
  // const posX: number = e.clientX - rect.left;
  // const posY: number = e.clientY - rect.top;

  // LAppDelegate.getInstance()._view.onTouchesMoved(posX, posY);
  const rect = (e.target as Element).getBoundingClientRect();

  const posX = e.clientX - rect.left;
  const posY = e.clientY - rect.top;

  LAppDelegate.getInstance()._view.onTouchesMoved(posX, posY);
}

これはlappdelegate.onTouchMoved関数の中身をほぼコピペしています。
TypeScriptについてはほぼ無知ですので、何かマズイことをしていたらすみません。
以上、お役に立てば幸いです。

3

ありがとうございます！ドラッグでの操作が不要になるので、この方法で解決いたしました。

「いいね！」 1
4

よかったです。 開発頑張ってください！

「いいね！」 1