Question

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

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

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

我知道球体的半径（5000），我知道盒子的大小（我可以选择一个方便的尺寸），我只知道如何检索那个“像素位置”（169,1349）里面的位置球体。

任何提示？

Answer 1

如果你想计算a-sky球面上的位置，我有一个方法。从相机的位置制作一条光线，这条光线会射到球体上。这个生命值是我们想要计算的位置。代码就像：

<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（还有很好的函数来获取元素在屏幕内的位置）

计算光球内元素的位置

2 个答案: