三.JS旋转投影使y轴变成z轴

Question

传统上，在 3D 投影中，Y 轴是代表“上下”的轴。我学会了将它与其他引擎一起思考，因为该轴是 Z 轴。我想知道 Three.JS 是否有办法制作 Z 轴“上/下”轴。如果是的话，有什么后果吗？

这是我想要的图表：

Answer 1

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

const WIDTH = 1024;
const HEIGHT = 768;
const VIEW_ANGLE = 45;
const ASPECT = WIDTH / HEIGHT;
const NEAR = 0.1;
const 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。

---

为了说明示例，这里是您创建的 JSFiddle，稍加修改即可在设置 up 向量后调用 lookAt： http://jsfiddle.net/NycWc/1/

Answer 2

以下将达到您想要的结果：

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

根据文档：

.DEFAULT_UP：矢量3
对象的默认向上方向，也用作 DirectionalLight、HemisphereLight 和 Spotlight（创建从上到下照射的灯光）的默认位置。
默认设置为 ( 0, 1, 0 )。

要了解详细信息，请参阅源代码。

Answer 3

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

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

正如您所要求的那样，这改变了它的方向。

Answer 4

xyz 坐标系应始终使用右手定则设置。创建自己的约定根本不是一个好的计划，并且会引起很多混乱。您可以随意旋转坐标系，但不要改变轴的方向。如果您确实想做您所显示的内容，您可以创建一个 x,y,-z 坐标系。