web-dev-qa-db-ja.com

three.jsでのカメラ、lookAtおよび回転の移動

LookAtとカメラの回転を理解できません。

X-y平面に[0,0,0]の周りに小さな球の円があります。

カメラは[0,0,30]に配置され、lookAtの後、カメラの回転は[0,0,0]です。円は上から見たように表示されます（予想どおり）。

次に、カメラを[30,0,0]に移動します。lookAtの後、カメラの回転は[0,90deg、0]です。円は横に表示されますが、私が期待するように水平ではなく垂直に表示されます。カメラがyに対して90度回転するのはなぜですか？

その後、カメラを[0,30,0]に移動し、lookAtの後、カメラの回転は[-90deg、0,90deg]です。円は、横ではなく横に再び表示されます。

カメラが回転しているのはなぜですか？ x軸とy軸上にあるため、回転はまったくないと考えました。

助けてくれてありがとう！ :-)

注：元々 https://github.com/mrdoob/three.js/issues/2917 に投稿されていましたが、Stack Overflowに来るように指示されました。

three.js
45
Charity Sipe

この問題を解決するには、lookAt（）コマンドを実行する前にカメラのアップベクトルを指定します。

// Place camera on x axis
camera.position.set(30,0,0);
camera.up = new THREE.Vector3(0,0,1);
camera.lookAt(new THREE.Vector3(0,0,0));

必要に応じてベクトルを変更します。負の値（0,0、-1）を指定して、上下を逆にすることもできます。 lookAt（）を使用する前にアップベクトルを設定することが重要です。

http://jsfiddle.net/VsWb9/991/ に2つのキューブを持つ完全な例を作成しました。小さい方が大きい方の上にあると仮定します（正のz軸上）。

77
jorgenfb