围绕地球三个.js 移动相机位置答案

【问题标题】：move a camera position around globe three.js围绕地球三个.js 移动相机位置
【发布时间】：2015-12-28 12:55:09
【问题描述】：

尝试在 three.js 地球仪上重新定位相机我有一个国家列表，当点击返回该国家/地区的纬度和经度时。我已经检查了这些，并且很确定这就是传递给下面代码的内容。所以我点击国家，相机移动到新位置，但它在地球表面内。它在正确的国家/地区下，所以我必须缩小。这是我使用的代码，地球的半径保存在 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。如果有人能告诉我一个很好的过渡方法，也会有帮助，谢谢

【问题讨论】：

标签： three.js

【解决方案1】：

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

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

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

update() {
/* stuff */

computeCurrentCameraPos();
setCameraPosFromConfig();
}

其中 computeCurrentCameraPos 是：

var computeCurrentCameraPos  = function() {
if (needsTransitionAnim) {
    t = (perf.now() - beginTime) / speedTime;
    if (t > 1) {
        t = 1;
        needsTransitionAnim = false;
    }

    Config.Phi = blendFunc (beginPhi, targetPhi, t);
    Config.Thetta = blendFunc (beginThetta, targetThetta, t);
    Config.ZoomRadius = blendFunc (beginZoomRadius, targetZoomRadius, t);
    }
}

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

请记住，如果 A 考虑方向，从 A 到 2*M_PI - A 的最接近方式是通过 0 >，所以这个例子需要稍微修改一下。

【讨论】：

【解决方案2】：

这似乎可行，但如果有人告诉我它不正确，我将不胜感激

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

但是如果有人可以帮助我完成一个很棒的过渡

【讨论】：

感谢您的帮助，这真的很有用