时间戳

首页 > 解决方案 > 给定经度和纬度的位置，如何旋转对象使其背向球体

javascript - 给定经度和纬度的位置，如何旋转对象使其背向球体

问题描述

我有一个球体和盒子，它们应该是上面的建筑物。我想旋转盒子（围绕 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);
}

实际结果：

在此处输入图像描述

想要的结果：

在此处输入图像描述

标签： javascriptaframe

解决方案

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

我会重用look-at组件逻辑，其中“查看”是用一个简单的方法进行的：

object3D.lookAt(THREE.Vector3())

有一个盒子和一个球体，只需将盒子变成lookAt球体，然后旋转它。

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

在这个小提琴中检查一下。但我会做的有点不同。

围绕球体旋转参考系

假设我们有以下设置。

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

在这个 fiddle中检查它，使用这个 API跟踪 ISS 。

推荐阅读