web-dev-qa-db-ja.com

Three.JSは、y軸がz軸になるように投影を回転させます

従来、3D投影では、Y軸は「上下」を表す軸です。他のエンジンでは、その軸がZ軸であると考えることを学びました。私が疑問に思っていたのは、 Three.JS にZ軸を「上/下」軸にする方法があるかどうかでした。もしそうなら、それに何か影響はありますか?

これが私が欲しいものの図です: enter image description here

29
Alex Turpin

座標系全体ではなく、カメラを変更するだけで済みます。例えば:

var WIDTH = 1024;
var HEIGHT = 768;
var VIEW_ANGLE = 45;
var ASPECT = WIDTH / HEIGHT;
var NEAR = 0.1;
var FAR = 10000;
camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
camera.position.z = 300;
camera.up = new THREE.Vector3( 0, 0, 1 );
scene.add(camera);

これにより、カメラのupベクトルがZ-UPを使用するように変更されます。


[〜#〜]編集[〜#〜]

例を説明するために、lookAtベクトルを設定した後にupを呼び出すように少し変更して作成したjsfiddleを次に示します。 http://jsfiddle.net/NycWc/1/

42
jterrace

オブジェクトでこの問題が発生しました。これが私がそれを修正した方法です。

object.rotation.z = 90 * Math.PI/180;
object.rotation.x = -90 * Math.PI/180;

これはあなたが求めているのと同じように方向を変えました。

2
user1066619

以下はあなたの望ましい結果を達成します

THREE.Object3D.DefaultUp.set(0, 0, 1);

ドキュメント によると

.DefaultUp:Vector3

オブジェクトのデフォルトの上方向。DirectionalLight、HemisphereLight、Spotlight(上から下に光るライトを作成する)のデフォルト位置としても使用されます。デフォルトでは(0、1、0)に設定されています。

1
TerekC

Xyz座標フレームは、常に右手の法則で設定する必要があります。独自のコンベンションを作成することは、単にそれほど良い計画ではなく、多くの混乱を引き起こします。座標フレームは自由に回転できますが、軸の方向は変更しないでください。表示したいことを本当にやりたい場合は、x、y、-z座標フレームを作成できます。

0
gijs van erp