基于相机旋转的Three.js指南针

Question

我想制作一个类似Facebook上的指南针：请点击此处查看图片。指南针中间的扇形区域（FOV）将根据摄像机视角的变化而旋转。我已经获取到了相机的x、y和z轴旋转角度，但不知如何将其转换成2D圆形视图？此外，three.js相机的y轴旋转角度仅在-PI/2到PI/2之间变化。非常感谢你的帮助 :)

- Sue Roh

---

欢迎来到SO。你不知道如何做哪一部分的问题？请展示你代码中相关的部分。 - WestLangley

Answer 1

使用THREE.Spherical()解决了相同的问题。

var vector = new THREE.Vector3();
var center = new THREE.Vector3();
var spherical = new THREE.Spherical();
vector.copy( camera.position ).sub( center );
spherical.setFromVector3( vector );
var rot = spherical.theta;
$('#compassSVG > svg')[0].style.transform = 'rotate('+ rot +'rad)';

- Amritesh Anand

---

这是一个非常好的答案！在大多数情况下都是必需的。如果使用常用的轨道控制器，它可能会被简化，其中球面角度可以通过controls.getAzimuthalAngle()获得。 - Radio

这对我帮助很大。谢谢！ - Jammy