三.js camera.rotation.y转360度答案

【问题标题】：Three.js camera.rotation.y to 360 degrees conversion三.js camera.rotation.y转360度
【发布时间】：2017-06-24 16:49:55
【问题描述】：

我正在尝试旋转与我的 3D 场景中的 Three.js 相机 rotation.y 值相关的 2D 对象（在 GTA 风格的小地图叠加中）。

问题是从 camera.rotation.y 返回的弧度值有点奇怪，从 0 > -1.4 弧度到前 45 度，从 -1.4 > 0 弧度返回到 90 度，0 > 1.4 弧度到 270 度，1.4 > 0 弧度到 360 度。

有没有人知道将这些值转换或转换为 360 坐标的方法？

我正在使用 PerspectiveCamera 和 OrbitControls。

提前致谢！

【问题讨论】：

尝试设置camera.rotation.order = 'YXZ';，看看行为对你来说是否更直观。它可能从 - PI 运行到 + PI，具体取决于您的用例。
感谢@WestLangley，事实证明这就是它所需要的！非常感谢（y）
我发布了一个带有进一步解释的答案。

标签： javascript 3d three.js

【解决方案1】：

camera.rotation 是所谓的Euler angle，因为您也可以阅读here in the three.js docs for THREE.Object3D（它是THREE.Camera 类的基类）。您不能简单地直接从欧拉角获得与某个轴的角度，因为您获得的角度取决于欧拉的阶数。

【讨论】：

【解决方案2】：

我认为这可能与从四元数旋转转换有关。不确定以下示例是否正确，但它可能有助于您找到解决方案。

const euler = new THREE.Euler();
const rotation = euler.setFromQuaternion(camera.quaternion);
const radians = rotation.z > 0
    ? rotation.z
    : (2 * Math.PI) + rotation.z;
const degrees = THREE.Math.radToDeg(radians);

这导致degrees 的值介于 0 到 360 之间，但随着相机旋转，角度值似乎以不一致的速率变化。

这是一个演示此行为的代码笔：

http://codepen.io/kevanstannard/pen/NdOvoO/

我使用了以下问题的一些细节：

three.js perspectivecamera current angle in degrees

编辑#1

根据@WestLangley 的回答，我上面的回答是不正确的，所以为了记录改进，这里有一些基于 West 解决方案的代码：

// Set Y to be the heading of the camera
camera.rotation.order = 'YXZ';

然后

const heading = camera.rotation.y;
const radians = heading > 0 ? heading : (2 * Math.PI) + heading;
const degrees = THREE.Math.radToDeg(radians);

还有一个更好的代码笔

http://codepen.io/kevanstannard/pen/YNJgXd

【讨论】：

感谢您的回复，但不是我想要的 - 问题是从 camera.rotation.y 返回的弧度值，我在上面解释过 - 因此不会转换为完整的 0 >我平移相机时的 360 度范围。当我在一个完整的循环中旋转相机时它返回的值（0 > -140 > 0 > 140 > 0 弧度）转换为（0 > -90 > 0 > 90 > 0 度），而不是 0 > 360 度。有人可以帮忙吗？
@DavidTidman 抱歉，我误读了这个问题。我已经修改了答案，希望它可以帮助您找到解决方案。
谢谢！！这完美无缺。现在看看四元数和欧拉，看看它是如何工作的。非常感谢您的帮助！

【解决方案3】：

如果你设置了

camera.rotation.order = "YXZ"

（默认为“XYZ”）欧拉角对您来说更有意义：

rotation.y 将以弧度表示相机朝向

rotation.x 将以弧度表示相机间距

rotation.z 将以弧度表示相机胶卷

将按该顺序应用旋转。

有关详细信息，请参阅this stackoverflow answer。

three.js r.84

【讨论】：