Question

我正在使用github中的Three.js globe示例，并尝试使用一些数据创建自己的globe。但是我发现很难让相机专注于给定的坐标。

我使用此功能将coords转换为点，然后对焦相机，但它没有做任何事情

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

其余代码与globe示例相同。我从索引文件中传递参数，如下所示：

<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，这样其他人就不会觉得你还在努力解决这个问题。三江源

聚焦three.js相机

1 个答案: