【ライブラリ】カメラ

REVISION: '78'

全てのカメラのアップデート処理に言えることとして、
フレームレートは外部要因により変更される可能性があるので
正確な時間経過を測るためにTHREE.Clock()を使用するのが望ましい

カメラのアップデートの方法

var clock = new THREE.Clock();

function render() {
    var delta = clock.getDelta();
    trackballControls.update(delta);
}

TrackBallControls

ソース

デモ：https://oreilly-japan.github.io/learning-three-js-2e-ja-support/chapter-09/04-trackball-controls-camera.html

var trackballControls = new THREE.TrackballControls(camera);

trackballControls.rotateSpeed = 1.0;
trackballControls.zoomSpeed = 0.1;
trackballControls.panSpeed = 1.0;
trackballControls.noZoom = false;
trackballControls.noPan = false;
trackballControls.staticMoving = false;
trackballControls.dynamicDampingFactor = 0.3; // staticMoving = false のときの減衰量
trackballControls.minDistance = 100;
trackballControls.maxDistance = 400;

function render() {
    trackballControls.update(delta);
}

OrbitControls

ソース

デモ：https://oreilly-japan.github.io/learning-three-js-2e-ja-support/chapter-09/08-controls-orbit.html

シーンの中心にあるオブジェクトの周りを回ったり、パンしたりするときに使う
TrackBallControlsと大差はない
※OrbitControls使用中はlookAt()が使えない

var orbitControls = new THREE.OrbitControls(camera);
orbitControls.autoRotate = true;

orbitControls.minDistance = 30;
orbitControls.maxDistance = 300;

// 上下の振り幅
orbitControls.minPolarAngle = 0;
orbitControls.maxPolarAngle = Math.PI / 4;

// lookAt()の代わり
orbitControls.target = new THREE.Vector3(0,0,0);

function render() {
    orbitControls.update(delta);
}

FlyControls

ソース

デモ：https://oreilly-japan.github.io/learning-three-js-2e-ja-support/chapter-09/05-fly-controls-camera.html

var flyControls = new THREE.FlyControls(camera);

flyControls.movementSpeed = 15;
flyControls.domElement = document.querySelector("#WebGL-output"); // シーンが描画される要素
flyControls.rollSpeed = Math.PI / 12;
flyControls.autoForward = true;
flyControls.dragToLook = false; // ドラッグによる視点移動の禁止

function render() {
    flyControls.update(delta);
}

FirstPersonControls

ソース

デモ：https://oreilly-japan.github.io/learning-three-js-2e-ja-support/chapter-09/07-first-person-camera.html

基本動作：マウスで周りを見渡し、キーボードで移動する

プロパティが大量にある。動きが確認できたものを下記に記載。

var camControls = new THREE.FirstPersonControls(camera);

camControls.lookSpeed = 0.2;
camControls.movementSpeed = 5;
camControls.noFly = true;
camControls.lookVertical = true; // false : 首を上下に振れない
camControls.autoForward = false;

camControls.activeLook = true; // false : 一方向しか見られない

 // 首を上下する角度
camControls.constrainVertical = true;
camControls.verticalMin = 1.0;
camControls.verticalMax = 2.0;

// カメラの初期方向
camControls.lon = -150;
camControls.lat = 120;

function render() {
    camControls.update(delta);
}