【Three.js】マウスカーソルの位置に応じて角度を変える3Dオブジェクト実装

やったこと

Three.jsで遊んでいて、インタラクティブな要素が欲しくなったので。タイトル通りのことをやりました。
メモ書き程度なのでわかりやすくなくすみません。（入門者向けに解説していません）
サンプルは気が向いたらアップします

前提

cameraのポジションはx:0, y:0, z:0で、rotationは初期位置なので、座標の中心にカメラがあり、Z軸のマイナス方向を向いていることになります。
動かすオブジェクトのポジションは、x:0, y:0, z:-80で、カメラから見ると中心にいることになります。
画面は固定です。

実装

今回の前提の場合、マウス位置を取得して、x軸から反時計回りの角度を取得できればよさそう。

document.body.addEventListener("mousemove", function (e) {
    //座標を取得する
    const rect = e.target.getBoundingClientRect();
    let mouseX = e.clientX - rect.left;
    let mouseY = e.clientY - rect.top;

    // マウス位置を-1〜1の範囲で表す
    mouseX = (mouseX / window.innerWidth) * 2 - 1;
    mouseY = -(mouseY / window.innerHeight) * 2 + 1;

　　　　　　　 //"object"と名付けられた3Dオブジェクトを取得￥
    const obj = scene.getObjectByName("object");
  　　
　　　　　　　　//今回のポイント。後述
    obj.rotation.z = Math.atan2(mouseY, mouseX) + -(Math.PI * 90 / 180);
  });

最後の１行でなにをやっているか

まず、Math.atan2(mouseY, mouseX)でマウス位置を元にしたx座標からの角度をラジアンで算出しています。
threeのrotationプロパティはラジアン単位なので、そのまま使えます。

今回の場合3Dモデルの頭の部分をカーソルに向かせたかったので、ここからさらに-90度オブジェクトを傾けます。
これはラジアンに変換して加算するだけです。

できた

このあとはオブジェクトとマウスの距離に応じて、動かすスピードをいじってみたいと思っています。