【three.js】カーソルの位置によってカメラの動きを制御する

//カーソルの位置を取得
const cursor = {};
cursor.x = 0;
cursor.y = 0;

window.addEventListener("mousemove", (event) => {
  cursor.x = event.clientX / window.innerWidth - 0.5;
  cursor.y = event.clientY / window.innerHeight - 0.5;
});

event.clientXだと値が大きすぎるので、window.innerWidthで割ることで0から1の数字にしている。

そこから-0.5することで、0を原点として-0.5から+0.5の範囲をとることができる。

const animate = () => {
  renderer.render(scene, camera);
  const clock = new THREE.Clock();
  let getDeltaTime = clock.getDelta();
  //カメラの制御をしよう
  camera.position.x += cursor.x * getDeltaTime;
  camera.position.y += -cursor.y * getDeltaTime;

  window.requestAnimationFrame(animate);
};

animate();

あとはフレームごとにカメラのポジションにカーソル座標を代入するだけだが、

deltaTimeというものを掛けている。

deltaTimeとは前回実行したフレームから何秒経過しているか、の値が入っており、

環境の違いによって差異を生まないようにするためのお約束みたいなものらしい。

Unityになってしまうが、deltaTimeについてよく分かる参考記事がこちら