给定其经度和纬度位置，如何旋转对象使其远离球体

Question

我有一个球体和一个盒子，应该是建筑物。而且我想旋转框（绕xy和z轴旋转），以使它们背对球面，就像普通建筑物会赋予框的经度和纬度（也就是x，y，z正子）一样。

目前看起来像这样：

希望您能帮助我解决我的问题，感谢您的帮助：）

我尝试使用经度和纬度进行许多旋转，但均无效果。 我还考虑过使用从球体中心到建筑物位置的矢量来找出旋转，但无法提出解决方案。

  var lat = i; //-90 to 90
  var lon = j; //-180 to 180


  var height = 10;
  var width = 10;
  var length = 10;

  var xyz = getXYZ(lat, lon, sphereradius, height);

  var boxE3 = document.createElement('a-box');

  boxE3.setAttribute('material', {
    color: getRandomColor()
  });

  boxE3.setAttribute('rotation', {
    x: 0, 
    y: lat, //Rotation that needs to be correctly set.
    z: lon
  });

  boxE3.setAttribute('position', {
    x: xyz[0],
    y: xyz[1],
    z: xyz[2]
  });

  boxE3.setAttribute('scale', {
    x: length,
    y: height,
    z: width
  });
  sceneEl.appendChild(boxE3);
}

实际结果：

想要的结果：

Answer 1

旋转对象使其背对另一个对象。

我将重用look-at组件逻辑，其中的“看”是通过一种简单的方法完成的：

object3D.lookAt(THREE.Vector3())

拥有一个框和一个球体，只需将框lookAt做成球体，然后旋转它即可。

box.object3D.lookAt(spherePosition)
box.rotation.y += Math.Pi

在this fiddle中进行检查。但是我会做些不同的事情。

围绕球体旋转参考框架

可以说我们有以下设置。

<a-sphere id="earth" position="1 1 -2" radius="1.5"></a-sphere>
<a-entity id="frameOfReference" position="1 1 -2>
   <a-box position="0 0 -1.5></a-box>
</a-entity>

现在，行星和框架处于相同位置。盒子的位置对应于行星半径。无论我们如何旋转参照系，它实际上都面朝地球。

为什么有用？因为现在您可以使用纬度和经度旋转参考框架：

    let x = latitude
    let y = longitude + 180 // 180deg shift because z is negative
    frame.setAttribute("rotation", x + " " + y + " " + 0)

在this fiddle中进行检查，其中使用this API跟踪了ISS。