对焦 three.js 相机

Question

我正在使用来自 github 的 Three.js 地球仪示例，并尝试使用一些数据制作我自己的地球仪。但是我发现很难让相机聚焦在给定的坐标上。

我使用此函数将坐标转换为点，然后对焦相机，但它没有做任何事情

 function searchCountry(lat,lng){

    var phi = (90 - lat) * Math.PI / 180;
    var theta = (180 - lng) * Math.PI / 180;

    camera.position.x = 200 * Math.sin(phi) * Math.cos(theta);
    camera.position.y = 200 * Math.cos(phi);
    camera.position.z = 200 * Math.sin(phi) * Math.sin(theta);
    camera.lookAt(mesh.position);
  }

其余代码与地球示例相同。我像这样从索引文件中传递参数：

<select class="country">
   <option data-lat="33" data-lng="65">Afghanistan</option>
</select>

+

jQuery(".country").change(function () {
    console.log(jQuery(".country :selected").data('lat'),jQuery(".country :selected").data('lng'));

    globe.searchCountry(jQuery(".country :selected").data('lat'),jQuery(".country :selected").data('lng'));
  });

我已经回显了这些值，它可以正确地传递它们并将它们转换为只是地​​球保持不变它不会旋转到给定的坐标。另外我想在旋转功能中添加一定数量的缩放，所以当它旋转时我希望它被放大，所以如果有人知道它会更有帮助。

Answer 1

这可能是 Three.js 中最适合相机旋转的格式

camera.position.set( x_max*1.01, y_max*1.01, z_max*1.01 ).add(YourObject.position.clone());

因此，如果您可以更改 Js 代码的最后一行，使其正确符合上述语法，并且它应该可以工作：

 function searchCountry(lat,lng){

    var phi = (90 - lat) * Math.PI / 180;
    var theta = (180 - lng) * Math.PI / 180;

    camera.position.x = 200 * Math.sin(phi) * Math.cos(theta);
    camera.position.y = 200 * Math.cos(phi);
    camera.position.z = 200 * Math.sin(phi) * Math.sin(theta);
    camera.lookAt(mesh.position); // <<-- Change this one to the format above!
  }

如果你喜欢这个anwser，请奖励Accepted Anwser，这样其他人就不会认为你还在为此苦苦挣扎。谢谢你