javascript - 在 Three.js 中将经度和纬度转换为 xyz(以便旋转相机)的问题

Question

我正在开发一个 javascript 应用程序，可以在其中设计自己的衣橱。我希望可以平滑地旋转壁橱(而不改变从相机到壁橱的距离)。通常旋转对象本身是最容易的，但考虑到不同的网格具有不同的起源(它们的相对 (0,0) 点不同于全局 (0,0) 点)，这不是一个选项。相反，我认为我必须像在球体上一样围绕壁橱旋转相机。所以我想做的是根据任何经度和纬度(用户输入)计算相机需要的确切位置。结果，轮换真的很奇怪。当前状态下的应用程序是 here (重要:不适用于 IE，但将来会有一个插件)。相关代码如下。注意:我在网上找到了这些公式。我自己做了几次数学运算，每次都能确认公式。我唯一可以确定的是到偏移点(xOffset、yOffset、zOffset)的距离(半径)是恒定的，但整个旋转非常奇怪。我发现了另一个这样的问题 here .我尝试用他们的公式替换我的公式(尽管它们没有意义，尽管它们似乎对它们有用)但这根本没有帮助(旋转仍然很奇怪，半径似乎不再恒定)。

伪:

x = xOffset + radius * cos(longitude) * cos(latitude)
y = yOffset + radius * cos(longitude) * sin(latitude)
z = zOffset + radius * sin(longitude)
camera.lookAt(xOffset, yOffset, zOffset)

相关代码(注:度数转换为弧度):

var lon = 30;
var lat = -90;
var cameraRadius = 400;

function cameraReposition() {   
var lon = dimensions.lon;
var lat = dimensions.lat;
camera.position.x = cameraX + cameraRadius * Math.cos(Math.PI * lon / 180) * Math.cos(Math.PI * lat / 180);
camera.position.y = cameraY + cameraRadius * Math.cos(Math.PI * lon / 180) * Math.sin(Math.PI * lat / 180);
camera.position.z = cameraZ + cameraRadius * Math.sin(Math.PI * lon / 180); 
camera.lookAt(new THREE.Vector3(cameraX, cameraY, cameraZ));
}


$('#visiblecanvas').mousemove(function(e){
    if(mousedown || rightMousedown) {
        var clickX = e.pageX - this.offsetLeft;    
        var clickY = e.pageY - this.offsetLeft;
        lon += (clickY - lastY) / 10;
        lat -= (clickX - lastX) / 10;
        lastY = clickY;
        lastX = clickX;
        if (lon > 360)
            lon -= 360;
        if (lon < -360)
            lon += 360;
        if (lat > 360)
            lat -= 180;
        if (lat < -360)
            lat += 360;
    }
});

另一个注意事项:lon 和 lat 在超过 360 度时的变化方式现在不是很相关，因为 lon 和 lat 目前都是通过 gui 控制的(出于调试目的)。

编辑:应用程序链接错误!固定。

Answer 1

    latLongToVector3: function(lat, lon, radius, heigth) {
      var phi = (lat)*Math.PI/180;
      var theta = (lon-180)*Math.PI/180;

      var x = -(radius+heigth) * Math.cos(phi) * Math.cos(theta);
      var y = (radius+heigth) * Math.sin(phi);
      var z = (radius+heigth) * Math.cos(phi) * Math.sin(theta);

      return new THREE.Vector3(x,y,z);
    }