Add shape in front of camera on a sphere [AFrame] (camera rotation/camera position)

Question

I have been trying to create a simple application whereby a 360 image is shown on a Sphere. The next step is to dynamically add 'hotspots' onto this image as the user pans around.

I've tried many different approaches (including delving deep deep into Three.JS) but it doesn't seem to be that easy. (UVs, positions, vertices etc).

A-Frame is awesome at making it super simple for developers to get up and running. I managed to find an example whereby there were two 'hotspots' on a sphere, which when hovered/focused, the sphere background changed.

I'm looking to create a new 'hotspot' in the cameras direction, however this is proving to be quite difficult because the camera position never changes but the rotation does.

For example, after panning, I see the following:

<a-camera position="0 2 4" camera="" look-controls="" wasd-controls="" rotation="29.793805346802827 -15.699043586584567 0">
    <a-cursor color="#4CC3D9" fuse="true" timeout="10" material="color:#4CC3D9;shader:flat;opacity:0.8" cursor="maxDistance:1000;fuse:true;timeout:10" geometry="primitive:ring;radiusOuter:0.016;radiusInner:0.01;segmentsTheta:64" position="0 0 -1" raycaster=""></a-cursor>
  </a-camera>

Ideally, to create a new hotspot in this position, I assumed all I'd need to do it add the rotation values to the position value and that'd be the correct place for the hotspot, but unfortunately, this doesn't work, either the hotspot is in the wrong position, it's not facing the camera or its no longer in view.

How can I create a 'hotspot' in the cameras viewpoint (in the middle)?

I've setup a codepen which should help show the problem I'm having better. Ideally when I pan around and click 'create hotspot', a 'hotspot' should be created directly in the middle (just like the red and yellow ones).

Thanks!

UPDATE: An idea I've had is to have a secondary sphere (smaller radius) with no background. If it's easy to know the XYZ coordinates of the camera view intersecting it, then this is made super simple. Is there a way of finding this out?

Answer 1

Without any intersection, when you know the position of the camera, this is the vector which needs to be: negated, normalized, multiplied by a scalar value which equals to the radius of the sphere. The result is the point of your new hotspot.

var pos = camera.position.clone().negate().normalize().multiplyScalar(sphereRadius);

jsfiddle example