如何在three.js中设置Z up坐标系？

Question

在three.js中，Y轴表示向上和向下，Z轴表示向前和向后。但我希望Z轴上下表示，Y轴前后表示。这是一张显示我想要的图片：

我想改变整个坐标系，如果我围绕y轴旋转网格，它会跟随新的坐标系而不是传统坐标系。

现在，我搜索了堆栈溢出并找到了这个链接：

1. Three.JS rotate projection so that the y axis becomes the z-axis。 它没有用。
2. THREEJS: Matrix from Z-Up Coordinate System to Y-Up Coordinate System。此方法只是更改对象或网格y和z顶点，但如果我围绕y轴旋转它，它将围绕传统的y轴旋转。我必须将矩阵应用于旋转矩阵，以使其像新坐标系一样旋转。
3. Changing a matrix from right-handed to left-handed coordinate system
4. Reorienting axes in three.js fails when webpage is refreshed。这也不起作用。

有什么方法可以让tri.js像Z up坐标系一样工作？

Answer 1

您可以使用

设置相机的向上矢量

camera.up.set(0,0,1);

然后，它会像你期望的那样工作。

Answer 2

上面的答案在简单的情况下有效，但是例如，如果您希望使用编辑器，则最好在进行任何操作之前进行设置

THREE.Object3D.DefaultUp = new THREE.Vector3(0,0,1);

因此，任何新对象也将使用此约定。 使用上一个答案，我在编辑器中苦苦研究控件周围的所有含义，保存对象等...

请注意，如果使用栅格，则仍必须旋转栅格，以使其覆盖XY平面而不是XZ

var grid = new THREE.GridHelper( 30, 30, 0x444444, 0x888888 );
grid.rotateX(Math.PI / 2);