Question

尝试在three.js地球仪上重新定位相机我有一个国家列表，点击后返回国家/地区的lat和lon。我已经检查了这些，我很确定这些是传递给下面代码的内容。所以我点击国家，相机移动到新位置，但它位于地球表面。它在正确的国家，所以我必须缩小。这是我正在使用的代码，地球的半径保存在var globeRadius中（以防万一非常明显）。

console.log(cameraTarget[0].lat,cameraTarget[0].lon)

  var phi = cameraTarget[0].lat * Math.PI / 180;
  var theta = (cameraTarget[0].lon + 90) * Math.PI / 180;
  posX = globeRadius * Math.cos(phi) * Math.sin(theta);
  posY = globeRadius * Math.sin(phi);
  posZ = globeRadius * Math.cos(phi) * Math.cos(theta);
  camera.position.set(posX,posY,posZ);

  camera.lookAt(new THREE.Vector3(0,0,0));

我猜我必须以某种方式将摄像机高度放在地球上方。这些是我最初的相机设置

var FOV = 45;
  var NEAR = 2;
  var FAR = 4000;

  // setup a camera that points to the center
  var camera = new THREE.PerspectiveCamera(FOV,width/height,NEAR,FAR);
  camera.position.set(posX,posY,posZ);
  camera.lookAt(new THREE.Vector3(0,0,0));

例如，我是否需要首先将宽度/高度添加到globalradius。如果有人能告诉我一个很有用的过渡方法，谢谢

Answer 1

这似乎有效，但我很感激有人告诉我它不正确

posX = (globeRadius+1200) * Math.cos(phi) * Math.sin(theta);
posY = (globeRadius+1200) * Math.sin(phi);
posZ = (globeRadius+1200) * Math.cos(phi) * Math.cos(theta);

但是有人可以通过一个很好的过渡来帮助我。

Answer 2

以下是基本平滑旋转+缩放过渡的想法。具有参数设置功能：

    [Authorize(Roles="Admin,Doctor")]
    public class Investigation : Controller
    {

    }

在更新循环中执行类似的操作：

let perf: Performance = window.performance;
// init other necessary variables

var initTransition = function (longitude, latitude, animationTime, radius) {   
    beginTime = perf.now();
    animTime = animationTime * 1000;

    beginPhi = Config.Phi;
    beginThetta = Config.Thetta;
    beginZoomRadius = Config.ZoomRadius;

    targetPhi = latitude * Math.PI / 180;
    targetThetta = (longitude + 90) * Math.PI / 180;
    targetZoomRadius = radius; 

    needsTransitionAnim = true;
 }

其中 computeCurrentCameraPos 是：

update() {
/* stuff */

computeCurrentCameraPos();
setCameraPosFromConfig();
}

和 setCameraPosFromConfig 是不言自明的。 blendFunc（a，b，t）可能是任何插值函数（这里我们得到[0,1]并期望[a，b]中的值）。

请注意，如果 A＆lt; A＆lt;＆lt;＆lt;＆lt;＆lt;＆lt; M_PI / 2 ，因此需要稍微修改此示例。

在地球三周围移动相机位置

2 个答案: