Question

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

问题是从camera.rotation.y返回的弧度值有点奇怪，从0开始; -1.4弧度通过前45度，从-1.4＆gt;返回0弧度到90度，0> 0。 1.4弧度至270度，并且1.4> 0弧度到360度。

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

我使用的是PerspectiveCamera和OrbitControls。

提前致谢！

Answer 1

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

<script type="text/javascript" src="path/jquery.js"></script>
<script type="text/javascript" src="path/jquery-ui.js"></script>
<script type="text/javascript" src="path/bootstrap.min.js"></script>

这导致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);的值从0到360，但是当相机旋转时，角度值似乎以不一致的速率变化。

这是一个演示此行为的codepen：

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

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

three.js perspectivecamera current angle in degrees

编辑＃1

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

degrees

然后

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

更好的代码

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

Answer 2

camera.rotation是一个所谓的Euler angle，因为您还可以阅读here in the three.js docs for THREE.Object3D（这是THREE.Camera类的基类）。您不能直接从欧拉角获得某个轴的角度，因为您获得的角度取决于欧拉的顺序。

Answer 3

如果您设置

camera.rotation.order = "YXZ"

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

rotation.y将是以弧度为单位的摄影机

rotation.x将是以弧度为单位的相机间距

rotation.z将是以弧度为单位的相机胶卷

旋转将按此顺序应用。

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

three.js r.84

Three.js camera.rotation.y到360度转换

3 个答案: