Javascript 使用四元数在Three.js中将平移/倾斜角度转换为XYZ？

我有一个传统的flash项目，我正在转换为Three.js，需要知道如何将现有的平移/倾斜值转换为3d坐标，即x、y、z

例如，我有一个热点

        var bubble = {
        name : 'hotspot',
        pan : 31,
        tilt : 0,
        distance : 2000
        };

放置在场景中，这些坐标大致位于正确的位置：

        text.position.x = -100;
        text.position.z = 200;
        text.position.y = 0;

我正在研究如何转换这些值。2000的距离相当于Three.js版本中的512

我一直在尝试用数学来计算数字，但数学不是我的强项

非常感谢您的帮助

编辑

我和你更接近了

var quaternion = new THREE.Quaternion();
    quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), Math.radians(bubble.tilt) );
    quaternion.setFromAxisAngle( new THREE.Vector3( 1, 0, 0 ), Math.radians(bubble.pan) );
    quaternion.setFromAxisAngle( new THREE.Vector3( 0, 0, 1 ), Math.radians(bubble.distance/2) );

    text.position.x = quaternion.x * 512;
    text.position.z = quaternion.z * 512;
    text.position.y = quaternion.y * 512;

但是我还是不能把它们放在正确的位置

这是测试

---

它们应该像这样排列

我相信你可以使用四元数类

var quaternion = new THREE.Quaternion();
quaternion.setFromAxisAngle( new THREE.Vector3( 0, 1, 0 ), tilt );
quaternion.setFromAxisAngle( new THREE.Vector3( 1, 0, 0 ), pan );
text.position.x = quaternion.x;
text.position.y = quaternion.y;
text.position.z = quaternion.z;

---

伪代码。。未经测试。

原始尝试成功

        var distance = bubble.distance/4;
        var pr = Math.radians(-1 * bubble.pan );
        var tr = Math.radians( bubble.tilt );

        text.position.x = distance * Math.cos(pr) * Math.cos(tr);
        text.position.y = distance * Math.sin(tr);
        text.position.z = distance * Math.sin(pr) * Math.cos(tr);

---

这有帮助，但不能解决问题。它们彼此堆叠在一起，而不是与平底锅相关的展开。请参见并查看渲染。它显示了如何从lat/lon坐标转换为笛卡尔坐标。通过一些实验，你应该能够理解PAN和LIN是如何与Lon和LT相关的。此外，考虑使用SpRITE文本标签或CSS文本，而不是在你的情况下使用3D文本。谢谢WestLangley。行。所以你认为四元数不是我应该做的树？