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

【问题标题】：Convert Pan/Tilt angles to XYZ in Three.js using Quaternion?使用四元数在 Three.js 中将平移/倾斜角度转换为 XYZ？
【发布时间】：2014-10-03 07:52:05
【问题描述】：

我有一个要转换为 Three.js 的遗留 Flash 项目，并且需要知道如何将现有的平移/倾斜值转换为 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

【问题讨论】：

查看threejs.org/examples/webgl_materials_cubemap_dynamic2.html 并查看render()。它显示了如何从纬度/经度坐标转换为笛卡尔坐标。通过一些实验，您应该能够弄清楚pan 和tilt 与lon 和lat 的关系。此外，请考虑在您的情况下使用 Sprite 文本标签或 CSS 文本，而不是 3D 文本。
感谢 WestLangley。会做。所以你认为四元数不是我应该吠叫的树吗？

标签： javascript 3d three.js

【解决方案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;

伪代码..未经测试。

【讨论】：

这有帮助，但不能解决问题。它们彼此相邻堆叠，而不是与它们的平底锅相关。

【解决方案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);

【讨论】：