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

Posted 2023-02-27

【中文标题】三.JS旋转投影使y轴变成z轴

【英文标题】：Three.JS rotate projection so that the y axis becomes the z-axis

【发布时间】：2012-01-06 12:32:03

【问题描述】：

传统上，在 3D 投影中，Y 轴是代表“上下”的轴。我学会了用其他引擎把它想象成那个轴是 Z 轴。我想知道Three.JS 中是否有办法使 Z 轴成为“上/下”轴。如果是这样，有什么后果吗？

这是我想要的图表：

【问题讨论】：

对我来说，右边的图片似乎有“x”和“y”的位置错误。他们不应该交换吗？

您能否指出我可以在哪里阅读有关此公约的更多信息？我从来没有遇到过：-/

@Arman 如果我想在之后交换 x 和 y 轴，你有没有找到任何解决方案？

@filip 你是什么意思？这张图片不是轴的旋转，它是“传统”的镜子，如果你想镜像事物，我认为你可以将它们在维度上缩放到负数。

【参考方案1】：

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

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

这改变了它的方向，就像你问的那样。

【讨论】：

我正在寻找一种方法来改变整个坐标系，以便改变位置 y 和 z 会产生我所描述的变化。

这个解决方案帮助了我.. 谢谢

【参考方案2】：

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

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

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

---

编辑：

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

【讨论】：

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

嗯，我认为 lookAt 仍然可以工作，因为它使用相机的向上矢量：github.com/mrdoob/three.js/blob/master/src/cameras/…

也许我做错了什么，但我希望相机上升，而不是它似乎离开了jsfiddle.net/NycWc

你必须调用lookAt 在设置up向量：jsfiddle.net/NycWc/1

如果您阅读了这个 9 年前的答案，请注意它不适用于 Threejs 的最新版本。请参考下面THREE.Object3D.DefaultUp的答案

【参考方案3】：

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

【参考方案4】：

以下将达到您想要的结果

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

根据documentation

.DefaultUp : Vector3

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

【讨论】：

这应该是正确的答案，接受的只是“破解”相机顶部值，而不是 OP 请求的整个坐标系（影响所有对象）。