title: THREE.js SphereGeometry Panorama hotspots using DOMElements
body: <p>I've created a simple WebGL 3D Panorama application using a <code>SphereGeometry</code>, <code>PerspectiveCamera</code> and a <code>CanvasTexture</code>. Now, I'm looking to bring the scene to life by adding "HotSpots" over certain parts of the <code>SphereGeometry</code>. The problem I'm having is understanding how to update the various <code>DOMElements</code> so that their position is reflective of the updated <code>Camera</code> position. </p>
  
  <p>Basically, as the <code>Camera</code> rotates the various <code>DOMElements</code> would move in and out of view relative to the direction the camera is spinning. I tried positioning a <code>&lt;div&gt;</code> <code>absolute</code> to the <code>&lt;canvas&gt;</code> and <code>translating</code> the <code>X</code> and <code>Y</code> position using the returned <code>PerspectiveCamera</code> <code>camera.rotation</code> but it didn't really work; here's my JS &amp; CSS implentation:</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#TestHotSpot {
      /* not sure if using margins is the best method to position hotspot */
      margin-top: 50px;
      margin-left: 50px;
      width: 50px;
      height: 50px;
      background: red;
      position: absolute;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>/** 
     CONFIG is my stored object variable; it contains the PerspectiveCamera instance 
     code is being called inside of my RequestAnimationFrame
  **/
  
  config.camera.updateProjectionMatrix();
  config.controls.update(delta);
  
  document.getElementById("TestHotSpot").style.transform = "translate("+ config.camera.rotation.x +"px, "+ config.camera.rotation.y +"px)";
  </code></pre>
  
  <p><a href="http://mpetroff.net/software/pannellum/" rel="noreferrer">Here</a> is also a live example of the desired effect.</p>
  
  <p>What would be the best solution to fix this problem? What I noticed when I ran this that the <code>DOMElements</code> would only slightly move; I also noticed that they wouldn't really take in account where along the <code>SphereGeometry</code> they were placed (for example, being positioned "behind" the <code>Camera</code>; really complex!</p>
  
  <p>I'm happy to use any plugins for the <code>THREE.js</code> engine as well as follow any tutorials. Thank you so much for replying in advance!</p>