计算光球内元素的位置

Question

我正在使用 a-sky 元素来显示 360° 光球层。

我的问题是我必须在光球内放置一些元素，这些元素必须像 'markers';但我不明白如何计算这些元素的 x-y-z 位置。

例如，假设我有一张尺寸为 4096x2048 的图片，我想在 169,1349 处放置一个简单的框。

我知道球体的半径（5000），我知道盒子的大小（我可以选择一个方便的大小），我只知道如何检索那个"pixel position"的位置（169， 1349) 球体内.

有什么提示吗？

Answer 1

如果你想计算天空球表面的位置，我有一个方法。从相机的位置发出一条射线，这条射线将击中球体。这个命中点就是我们要计算的位置。代码如下：

<script src="https://cdnjs.cloudflare.com/ajax/libs/aframe/0.3.2/aframe.min.js"></script>
<script src="//cdn.rawgit.com/donmccurdy/aframe-extras/v2.5.2/dist/aframe-extras.js"></script>
<!DOCTYPE html>  
<html>  
<head>
<title>sphere position</title>
<script>
  document.addEventListener("click",function(){
    var camera = document.querySelector("a-camera");
    var cursor = document.querySelector("a-cursor");
    var camera_pos = new THREE.Vector3().copy(camera.object3D.getWorldPosition()); // get camera's world position
    var cursor_pos = new THREE.Vector3().copy(cursor.object3D.getWorldPosition()); // get cursor's world position
    var direction = new THREE.Vector3().subVectors(cursor_pos,camera_pos); //calculate direction from camera to cursor
    var raycaster = new THREE.Raycaster(camera_pos,direction.normalize()); // make raycaster 
    var sky = document.querySelector("a-sky");
    var intersects = raycaster.intersectObject(sky.object3D.children[0]); //let raycaster intersect the 'a-sky' sphere
    console.log(intersects[0].point); 

  });
  </script>
</head>
<body>
<a-scene>
  <a-camera universal-controls position="0 1.6 0">
    <a-cursor></a-cursor>
  </a-camera>
  <a-sky material="side:double"></a-sky>  
</a-scene>
</body>
</html>

Answer 2

很抱歉回答我自己的问题，但这次真的很简单：

function sphericalCoordsToVector3(distance, latitude, longitude){
  return new THREE.Vector3(
    distance * -Math.cos(latitude) * Math.cos(longitude),
    distance * Math.sin(latitude),
    distance * -Math.cos(latitude) * Math.sin(longitude)
  );
}

其中 distance 是距我们要放置元素的中心（相机）的距离。

仅供记录，相反的功能是：

function vector3ToSphericalCoords(vector) {
  var phi = Math.acos(vector.y / Math.sqrt(vector.x * vector.x + vector.y * vector.y + vector.z * vector.z));
  var theta = Math.atan2(vector.x, vector.z);
  return {
    longitude: theta < 0 ? -theta : (Math.PI * 2.0) - theta,
    latitude: (Math.PI / 2.0) - phi
  };
};

原始函数可以在这里找到：mistic100/Photo-Sphere-Viewer（也有很好的函数可以获取元素在屏幕内的位置）

计算光球内元素的位置

Calculate the position of an element inside a photosphere

aframe