javascript - 使用四元数在 Three.js 中将平移/倾斜 Angular 转换为 XYZ？

Question

我有一个旧版 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。

我一直在尝试使用 http://threejs.org/docs/#Reference/Math/Quaternion 让数字发挥作用然而数学不是我的强项。

非常感谢任何帮助!

编辑

我离得更近了

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;

但是我仍然无法让它们正确定位..

这是测试 http://gms.beektest.co/resources/beek3/eg.html

它们应该排列得更像这样 http://beek.co/g218

Answer 1

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

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;

伪代码..未经测试。