Three.js でカメラの回転について．こういうのはイメージで覚えとくのがいいと思うのでやってみる．

三次元での回転

いうまでもないことだが，三次元での回転はまあ，色々とちょっとだけややこしい． 記述の方法にも色々あって，それぞれ three.js でもサポートされているが， ここでは単純に書きやすい Euler 角 で描いてみよう． Camera object を回すことを考える．

Object3D.rotation

Document is here.

Euler 角で表記するときに必要なのは x,y,z それぞれの方向の角と， どの順番で回転をするか．Three.js では順番は文字列で指定する (default: “XYZ”)． 雰囲気はこんなかんじだ．

camera.rotation
// Object { _x: -3, _y: 1, _z: 0, _order: "XYZ", onChangeCallback: THREE.Object3D/<.rotation.value<() }

というわけで，(camera.rotation.set とかでもできるわけだけど）

camera.rotation.order = "XYZ"
camera.rotation.x = 0.3;

みたいなことをすればよい．

ふらふら迷いこむときに気をつけるべきは

• 回転が適用される順番は値を与える順番にはよらない
• 回転の軸は世の中の座標軸じゃなくて本人の座標軸
• ちなみにだけど camera.eulerOrder ってのがあるけど deprecated.

というあたりだろうか．

やってみる

まず最初にこのようなシーンを用意します．

z 軸が上で，カメラは (220,0,80) のところにいて原点を見ています． 我々の方には x 軸が突き刺さってきています．

カメラを動かすときには気分的にまず z軸方向に回したい（左右を見回したい）のでそのようにしてもらいましょう

camera.rotation.order = "ZYX";

すると (camera.rotation.x などは保持されたままなので) このようになります:

もういちど原点のほうを向いてもらいましょう (O = new THREE.Vector3(0,0,0);):

camera.lookAt(O);

ここで camera.rotation.z は π/2, camera.rotation.y は 0 になっています． rotation.z を増やしてみると

camera.rotation.z += 0.2;

ちょっと左を向けます．

こんどはもうちょっと足元をみたい．

camera.rotation.x -= 0.2;

原点を見なおして首をかしげる

camera.lookAt(O);
camera.rotation.y += 0.2;

ということで次から迷わない．