可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

Im using an a-sky element to display a 360° photosphere.

My problem is that I have to place inside the photosphere some elements that must act like 'markers'; but I do not understand how to calculate the x-y-z position of those elements.

For example, lets say that I have a picture with size 4096x2048 and I want to place a simple box at 169,1349.

I know the radius of the sphere (5000), i know the size of the box (I can choose a convenient size), I only know how to retrieve the position of that "pixel position" (169,1349) inside the sphere.

Any hints?

回答1:

If you want to calculate position on the a-sky sphere surface, I have a method. make a ray from camera's position, and this ray will hit on sphere. this hit point is the position that we want to calculate. the code is like:

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

回答2:

Sorry for answering my own question but this time was really easy:

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

Where distance is the distance from the centre (camera) where we want to put our element.

Just for the records, the opposite function is:

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
  };
};

The original functions can be found here: mistic100/Photo-Sphere-Viewer (there are also nice functions to get the position of the element inside the screen)