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

Posted 2023-02-27

【中文标题】如何在three.js中设置Z坐标系？

【英文标题】：How can I set Z up coordinate system in three.js?

【发布时间】：2017-11-21 15:39:19

【问题描述】：

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

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

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

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

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

【问题讨论】：

抛开three.js使用右手系统这一事实，您可以尝试在负z方向缩放场景，并翻转面部的渲染顺序。

你应该接受答案。

【参考方案1】：

您可以使用设置相机的向上矢量

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

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

【讨论】：

最好完全改变坐标系，如***.com/a/58554774/5202815中所说

【参考方案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);