1

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

伪：

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 控制的（用于调试目的）。

编辑：错误的应用程序链接！固定的。

4

2 回答 2

4 
    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);
    }
于 2012-11-29T18:33:20.790 回答
1

相机定位在我看来还不错，至少当纬度或经度发生变化时它遵循正确的轨迹，而另一个保持不变。看起来很奇怪的是相机的方向——lookAt 没有指定“向上”的位置，因此它可以选择任何方向，例如，您最终可能会看到正确的点，但是是上下颠倒的。

我自己没有尝试过 Three.js，但在文档中我看不到将附加信息提供给相机的方法。您可能必须手动设置 projectionMatrix 及其逆矩阵。

于 2012-07-02T09:36:01.707 回答