Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

やったこと

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);
  });

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

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

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

できた

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

yu-smc
WebAR / Web Front-End developer
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away