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

Question

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

我想以这样的方式更改整个坐标系：如果我绕 y 轴旋转网格，它会遵循新的坐标系而不是传统的坐标系。

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

1. Three.JS 旋转投影，使 y 轴变成 z 轴。 没用。
2. THREEJS：从 Z 向上坐标系到 Y 向上坐标系的矩阵。此方法只是更改对象或网格 y 和 z 顶点，但如果我绕 y 轴旋转它，它会绕传统 y 轴旋转。我必须将矩阵应用到旋转矩阵，以使其像新坐标系一样旋转。
3. 将矩阵从右手坐标系更改为左手坐标系
4. 刷新网页时，在 Three.js 中重新定向轴失败。这也行不通。

有什么方法可以让 Three.js 像 Z 向上坐标系一样工作吗？

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

Answer 3

对于反应三纤维

使用

THREE.Object3D.DEFAULT_UP = new THREE.Vector3(0, 0, 1)

准系统代码如下所示：

import { Canvas } from "@react-three/fiber";
import * as THREE from "three";

export default function App() {
    THREE.Object3D.DEFAULT_UP = new THREE.Vector3(0, 0, 1);

    return (
        <Canvas>
            {/* Other components here */}
        </Canvas>
    );
}