Question

我正在制作一个3D指南针，用于跟踪三个.js中的相机移动。 Here's an image of the compass

在图像中，饼图切片是相机的FOV，小的粉红色圆圈是场景中的对象。场景是一个球体，物体沿着球体的边缘。给定对象的x，y和z位置，如何获得2d圆的相对位置？我尝试了这个角度： yAngle = Math.atan(xpos / zpos)然后通过执行以下操作获取圆圈上的x和y位置：x = radius * Math.cos(yAngle), y = radius * Math.sin(yAngle)，但这不是正确的位置。我想我可以用three.js投影做点什么吗？

我真的很感激一些帮助：）

Answer 1

考虑到你在太空中有几个物体，包括你的相机。如果您从相机的俯视角度查看场景，并且忽略对象是否在相机的地平线上方/下方，那么您可以根据X / Z来考虑对象的位置（请记住您的外观方向是相机的Y轴）。

在相机空间中获取对象位置

获取对象相对于另一个对象的3D位置相对简单。在这种情况下，您需要物体相对于相机的位置。

// keep this somewhere accessible to your function scope
var tempObjectLocation = new THREE.Vector3();

// later in your code...

tempObjectLocation.copy(yourObject.position);

// only need to do this if your object isn't already in world coordinates
yourObject.parent.localToWorld(tempObjectLocation); 

// put the vector in camera space
camera.worldToLocal(tempObjectLocation);

// tempObjectLocation now contains the object's position in camera space

获取指南针上的位置

现在您拥有物体在相机空间中的位置，您可以消除Y分量，或使用它来检测物体是否高于/低于相机视野。在你的情况下：

tempObjectLocation.y = 0;

现在你有一个X / Z矢量。我们说它的值是{x: 15, y: 0, z: 8}。我们还要说您的指南针使用半径5将对象指示器放在外边缘周围。只需设置矢量的长度即可。

tempObjectLocation.setLength(5);
// tempObjectLocation is now {x: 4.411764705882353, y: 0, z: 2.3529411764705883}

X和Z值现在代表指南针上的指示器位置，其中{x: 0, y: 0, z: 0}是指南针的中心。（您可能需要映射X / Z =＆gt; X / Y，或应用其他变换，具体取决于您绘制指南针的方式。）

3d球体中的对象坐标为2d

1 个答案: