LoginSignup
3

More than 3 years have passed since last update.

Three.js で遊び倒す -カメラを動かそう Part.3 -

Last updated at Posted at 2019-03-26

Three.js day 6 となりました。

本日も、カメラを動かしていきます。
インタラクションを取り入れます。

1. 完成版

See the Pen mouseMoveX, Z(experimental) by hiroya iizuka (@hiroyaiizuka) on CodePen.

2. 参考文献

マウスイベントで取得されるカーソル座標パラメータの整理(offset, page, screen, client)
ICS MEDIA
初めてのThree.js

3. 分解してみる

❶.
前回、camera.lookAt() を使い、中央を注視しながら、カメラを動かしました。

今回は、マウスを動かしたら、画面も動くようにましょう。

1. マウス座標の取得

マウスを動かすには、どうしたらよいでしょうか?
まず、マウス座標を取得する必要がありますね。

マウス座標のパラメーターには、pageX, clientX, offset などがあります。

clientX

ブラウザウィンドウのなかで、マウス座標を取得するパラメーターです。
ウィンドウの左上が、(0 , 0) になります。
event.clientX で、X 座標が取得できます。

pageX

ページ全体での、マウス座標を取得するパラメーターです。
clientX との違いは、スクロールすることで明瞭になります。
pageX は、page全体から座標を作るため、スクロールして下に移動した時に注意が必要です。
つまり、見えていない領域を計算に入れて、座標を作らなければいけません。

今見えているウィンドウのみから計算する、clientX とは誤差が生まれるわけですね。
今回は、スクロールしないのでどちらでも良いですが、clientX を使います。

両者の違いについて、詳細は、こちら の記事を参照ください。

2. mousemove イベントを設定しよう

色々な方法 がありますが、addEventListener を使いましょう。

let mouseX = 0;
document.addEventListener("mousemove", (e)=>{
  mouseX = e.clientX
})

このmouseX をcamera.position.x に組み込めば、完成です。

index.html
    let rot = 0;
    let mouseX = 0;

    document.addEventListener("mousemove", event => {
          mouseX = event.clientX;
    });

    function renderScene() {

          camera.position.x += (mouseX - camera.position.x) * 0.005;
          camera.lookAt(new THREE.Vector3(0, 0, 0));

          requestAnimationFrame(renderScene);
          renderer.render(scene, camera);
    }

See the Pen mouseMoveX (experimental) by hiroya iizuka (@hiroyaiizuka) on CodePen.

mouse の動きに対応して、画面が動くようになりました。
しかし、表現としては、まだいまいちですね・・・。


z座標にも、このmousemove action を取り入れましょう。

index.html
 function init() {
        let rot = 0;
        let mouseX = 0;
        let mouseY = 0;

        document.addEventListener("mousemove", event => {
          mouseX = event.clientX - 2 * window.innerWidth;
          mouseY = event.clientY;
        });

 function renderScene() {
        camera.position.x += (mouseX - camera.position.x) * 0.05;
        camera.position.z += (mouseY - camera.position.z) * 0.05;
        camera.lookAt(new THREE.Vector3(0, 0, 0));

        requestAnimationFrame(renderScene);
        renderer.render(scene, camera);
    }
 }

See the Pen mouseMoveX, Z(experimental) by hiroya iizuka (@hiroyaiizuka) on CodePen.

さっきより、豊かな動きになりました!

余談ですが、以下のコード

camera.position.x += (mouseX - camera.position.x) * 0.05;

は、イージングの公式と言われるものです。
現在の値 += (目標値 - 現在の値) * イージング係数

で設定できます。
CSS animation でも、ease-in ease-out などありましたね。
この公式を使うことで、動きがより滑らかになるので、適宜取り入れていきましょう。

それでは、また明日〜

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3