3d球體中的對象坐標為2d

Question

我正在制作一個3d指南針，可在three.js中跟蹤相機的運動。 這是指南針的圖像

在圖像中，餅圖是相機的FOV，粉紅色的小圓圈是場景中的對象。 場景是一個球體，對象都沿着球體的邊緣。 給定對象的x，y和z位置，如何獲得二維圓的相對位置？ 我嘗試獲取角度： 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 => X / Y，或應用其他變換，具體取決於繪制指南針的方式。）