【Three.js】カメラの制御例

どうも、とがみんです。

この記事では、カメラを制御するにあたって、マウスの動きに応じてカメラを動かしたり、オブジェクトの周りを周回させたりと、いくつか例をいくつか紹介していきます。

Contents

カメラの設置
カメラの制御例
まとめ
参考文献

カメラの設置

カメラは以下のコードで設置されます。

 // カメラを作成。new THREE.PerspectiveCamera(画角, アスペクト比)
 const camera = new THREE.PerspectiveCamera(45, width / height);
 camera.position.set(0, +0.5, 0);

// カメラを作成。new THREE.PerspectiveCamera(画角, アスペクト比)

const camera = new THREE.PerspectiveCamera(45, width / height);

camera.position.set(0, +0.5, 0);

カメラの制御例

中心を向いてカメラを周回させる

立方体を3次元空間の中心に置き、その周りを円を描きながらカメラが周回しています。

three.js pic.twitter.com/p6qjps0YVY
— 究極の自由を追求するブログFresopiya (@fresopiya) July 18, 2019

以下のコードは、カメラがxz平面を半径1の円を描くように動作するようにしているコードです。
camera.lookAt(new THREE.Vector3(0, 0, 0));のコードにより、カメラは常に原点を見つめています。

let rot = 0;
 tick();
 // 毎フレーム時に実行されるループイベントです
 function tick() {
 	rot += 0.3; // 毎フレーム角度を0.3度ずつ足していく
     const radian = (rot * Math.PI) / 180;
     // xz平面にて半径1の円を描くように動作。
     camera.position.x = Math.sin(radian);
     camera.position.z = Math.cos(radian);
     camera.lookAt(new THREE.Vector3(0, 0, 0));//原点を見つめる
     renderer.render(scene, camera); // レンダリング
     requestAnimationFrame(tick);
 }

let rot = 0;

tick();

// 毎フレーム時に実行されるループイベントです

function tick() {

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

const radian = (rot * Math.PI) / 180;

// xz平面にて半径1の円を描くように動作。

camera.position.x = Math.sin(radian);

camera.position.z = Math.cos(radian);

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

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

requestAnimationFrame(tick);

}

以下のボタンを押すと立方体が表示されます。その立方体の周りをカメラが周回するように動いています。

マウスの位置でカメラの位置を制御する

マウスの動きに合わせて、カメラが動くようにします。

マウスをX軸方向に動かした時に、カメラが動くようになっています。マウスの位置に応じて、原点を向いたカメラが、xz平面上を半径1の円を描くように動作します。

three.js pic.twitter.com/OpSIIkHbWb
— 究極の自由を追求するブログFresopiya (@fresopiya) July 18, 2019

let rot = 0; // 角度
 let mouseX = 0; // マウス座標
 
 // マウス座標はマウスが動いた時にマウスが位置するx座標を取得する
 document.addEventListener("mousemove", (event) => {
   mouseX = event.pageX;
 });
 
 tick();
 function tick() {
 	// マウスの位置に応じて角度を設定
 	// マウスのX座標がステージの幅の何%の位置にあるか調べてそれを360度で乗算する
   	const targetRot = (mouseX / window.innerWidth) * 360;
     rot += (targetRot - rot) * 0.2;
     // ラジアンに変換する
     const radian = rot * Math.PI / 180;
     // 角度に応じてカメラの位置を設定
     camera.position.x = Math.sin(radian);
     camera.position.z = Math.cos(radian);
     camera.lookAt(new THREE.Vector3(0, 0, 0));// 原点方向を見つめる
     renderer.render(scene, camera);// レンダリング
     requestAnimationFrame(tick);
 }

let rot = 0; // 角度

let mouseX = 0; // マウス座標

// マウス座標はマウスが動いた時にマウスが位置するx座標を取得する

document.addEventListener("mousemove", (event) => {

mouseX = event.pageX;

});

tick();

function tick() {

// マウスの位置に応じて角度を設定

// マウスのX座標がステージの幅の何%の位置にあるか調べてそれを360度で乗算する

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

rot += (targetRot - rot) * 0.2;

// ラジアンに変換する

const radian = rot * Math.PI / 180;

// 角度に応じてカメラの位置を設定

camera.position.x = Math.sin(radian);

camera.position.z = Math.cos(radian);

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

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

requestAnimationFrame(tick);

}

以下のボタンを押すと立方体が記事中に表示され、マウスの動きに応じて回転します。

マウス操作によるカメラの制御

カメラをドラッグにより回転させたり、2本指でピッチすることによって、3Dオブジェクトからカメラを遠くに離したり、近づけたりできるようにします。

three.js pic.twitter.com/YHh8UVS7va
— 究極の自由を追求するブログFresopiya (@fresopiya) July 18, 2019

これを作成するにあたって、OrbitControls.jsを使用します。
以下のGithubのexamples/js/controlsフォルダの中に、OrbitControls.jsがあるので、そのファイルを読み込みます。

https://github.com/mrdoob/three.js

下記コードを記述すると、ドラッグにより回転させたり、遠くに離したり、近づけたりできるようになります。

// カメラコントローラーを作成
 const controls = new THREE.OrbitControls(camera);
 
 tick();
 // 毎フレーム時に実行されるループイベントです
 function tick() {
   // レンダリング
   renderer.render(scene, camera);
   requestAnimationFrame(tick);
 }

// カメラコントローラーを作成

const controls = new THREE.OrbitControls(camera);

tick();

// 毎フレーム時に実行されるループイベントです

function tick() {

// レンダリング

renderer.render(scene, camera);

requestAnimationFrame(tick);

}

以下のボタンを押すと立方体が表示され、マウスで操作することができます。