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;

我正在尝试研究如何转换这些值。在Three.js版本中，2000的距离等于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

我相信你可以使用Quaternion类

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;

伪代码..未经测试。

Answer 2

原创尝试

        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);

使用四元数将Pan / Tilt角度转换为Three.js中的XYZ？

2 个答案: