【入門】Three.jsのカメラ自動制御を設定してみた

こんにちは、たかです。

本業と育児の合間でプログラミングを学習しています。

3Dアニメーションを学ぼうと思って、Three.jsを勉強し始めました。

その覚書として書いていきます。

前回は、マウス操作でカメラを自由に動かせるような設定をしました。

今回はこの2種類のカメラ制御を設定してみます。

・カメラを自動で動かす
・マウスとカメラの位置を連動させる

カメラの自動移動
マウスとカメラの位置を連動させる
最後に

カメラの自動移動

カメラをオブジェクトを中心に周回させるように設定していきます。

そのために三角関数を利用します。

半径1の円とした時に、上の円における(X, Y)座標を求め続ければ原点を中心に円運動を再現できます。

そのために三角関数を使用します。

cosθ = X / 1　⇔　X = 1 * cosθ
sinθ = Y / 1　⇔　Y = 1 * sinθ

となります。

JavaScriptにはこれらを計算する関数があります。

Math.cos(radian)
Math.sin(radian)

それぞれ radian で計算して貰う必要があります。
45°（これは、度数法の表現）
π/4（これが、弧度法の表現で、radian）

45°をπ/4に変換する公式があります。

45 * (Math.PI / 180)

※Math.PI = π

これらを使って、カメラが円運動するように設定します。

let deg = 0;

// 毎フレーム時に実行されるループイベントです
function tick() {
　//cubeを回転させる
　cube.rotation.y += 0.03;

　deg += 0.5; // 毎フレーム角度を0.5度ずつ足していく

　// ラジアンに変換する
　const radian = (deg * Math.PI) / 180;

　// 角度に応じてカメラの位置を設定
　camera.position.x = 100 * Math.cos(radian);
　camera.position.z = 100 * Math.sin(radian);

　// 原点方向を見つめる
　camera.lookAt(new THREE.Vector3(0, 0, 0));

　// レンダリング
　renderer.render(scene, camera);
　requestAnimationFrame(tick);
}

実際のコードはこちら

ラジアンの変換はこの方法でもできるのですが、別の方法をあります。

THREE.Math.degToRad(deg)

こちらを使うことで可能です。
Degree to Radian ということで、度数からラジアンに変換することができます。

// 毎フレーム時に実行されるループイベントです
function tick() {
　//cubeを回転させる
　cube.rotation.y += 0.03;

　deg += 0.5; // 毎フレーム角度を0.5度ずつ足していく

　//degToRad を利用してラジアンに変換する方法
　camera.position.x = 100 * Math.cos(THREE.Math.degToRad(deg));
　camera.position.z = 100 * Math.sin(THREE.Math.degToRad(deg));

　// 原点方向を見つめる
　camera.lookAt(new THREE.Vector3(0, 0, 0));

　// レンダリング
　renderer.render(scene, camera);
　requestAnimationFrame(tick);
}

実際のコードはこちら

マウスとカメラの位置を連動させる

今度は、マウスの横移動に合わせてカメラを移動するように設定します。

まずは、マウスが動いた時にそのX座標を取得します。

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

このX座標がwindow幅のどの割合の位置にあるのか計算し、360°を乗算します。

const targetDeg = (mouseX / window.innerWidth) * 360;

現在値 deg から targetDeg（目標値）の距離を計算し、0.02 乗算した値を deg に毎フレーム足していく。
これで、減衰しながら目標値まで到達させることができる。

deg の値をラジアンに変換します。
const radian = (deg * Math.PI) / 180;

最後にカメラの位置に設定します。
// 角度に応じてカメラの位置を設定
camera.position.x = 100 * Math.sin(radian);
camera.position.z = 100 * Math.cos(radian);

これらの処理をすることでマウスに移動に反応し、カメラも移動させることが出来ます。

実際のコードはこちら