Three.JS将投影旋转使y轴变为z轴

Question

传统上，在3D投影中，Y轴是代表“上下”的轴。在我使用其他引擎的时候，我习惯把Z轴看作是那个轴。我想知道在Three.JS中是否有一种方法可以使Z轴成为“上/下”轴。如果有，是否会有任何影响？

这是我想要的图示：

- Alex Turpin

---

在我看来，右侧的图片似乎把“x”和“y”的位置放错了。它们不应该互换吗？ - Arman

你能告诉我在哪里可以阅读更多关于这个规范的内容吗？我从未遇到过它 :-/ - Kuba

@Arman，你找到任何解决办法了吗？如果我想在之后交换x和y轴，该如何操作？ - filip

@filip 你是什么意思？这张图片不是坐标轴的旋转，而是“传统”的镜像。如果你想要镜像东西，我认为你可以将它们在尺寸上缩放到负数。 - Arman

Answer 1

你可以只更改相机而不是整个坐标系。例如：

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);

这将更改相机使用Z-UP的up向量。

---

编辑:

为了举例说明，这里有一个略微修改后调用了lookAt函数来设置up 向量的 jsfiddle 示例: http://jsfiddle.net/NycWc/1/

- jterrace

---

谢谢你的回答！我现在没有时间测试，但很快会尝试。这对其他相机方法有什么影响吗？我还能正常使用 lookAt 等方法吗？ - Alex Turpin

嗯，我认为lookAt仍然可以工作，因为它使用相机的上向量：https://github.com/mrdoob/three.js/blob/master/src/cameras/Camera.js#L32 - jterrace

也许我做错了什么，但我本来希望摄像机向上移动，而不是向左移动http://jsfiddle.net/NycWc/ - Alex Turpin

在设置“up”向量之后，您必须调用“lookAt”：http://jsfiddle.net/NycWc/1/ - jterrace

如果你读这篇9年前的回答，请注意它不适用于最新版本的Threejs。请参考下面的THREE.Object3D.DefaultUp回答。 - MacK

Answer 2

以下内容将实现您所需的结果。

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

根据文档:

.DefaultUp: Vector3

对象的默认上方向，也用作DirectionalLight、HemisphereLight和Spotlight的默认位置（创建从上往下照射的灯光）。 默认值为(0,1,0)。

- TerekC

---

这应该是正确的答案，被接受的答案只是“黑客式”地修改了相机顶部值，而没有改变整个坐标系统（影响所有物体），而这正是 OP 所要求的。 - Tyathalae

X 和 Y 将被交换。 - OZ_

Answer 3

我遇到了一个对象的问题。这是我修复它的方法。

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

这个操作可以按照您的要求改变它的方向。

- user1066619

---

我正在寻找一种改变整个坐标系的方法，以便更改位置y和z将产生我所描述的更改。 - Alex Turpin

这个解决方案帮了我很多。谢谢。 - Steve Johnson

Answer 4

xyz坐标系应始终按照右手定则设置。自己创建约定并不是一个好主意，会导致很多混乱。您可以随意旋转坐标系，但不要改变轴的方向。如果您真的想要显示所做的事情，可以创建一个x，y，-z坐标系。

- gijs van erp