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

【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度オブジェクトを傾けます。

これはラジアンに変換して加算するだけです。

できた

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