title: Three.js click point on sphere
body: <p>I'm trying to make an object with points that are created when the mouse clicks on a sphere. the camera is inside the sphere and I want to make clickable areas mapped onto the sphere. </p>
  
  <p>Something like <a href="https://threejs.org/examples/canvas_interactive_cubes.html" rel="nofollow noreferrer">https://threejs.org/examples/canvas_interactive_cubes.html</a></p>
  
  <pre><code>    mouse.x = ( event.clientX / renderer.domElement.width ) * 2 - 1;
      mouse.y = - ( event.clientY / renderer.domElement.height ) * 2 + 1;
      mouse.z = 0.5;
  
  
      raycaster.setFromCamera( mouse, camera );
  
      var objects = [];
      objects.push(panoVideoMesh);
      panoVideoMesh.material.side = THREE.DoubleSide;
  
      var intersects = raycaster.intersectObjects( objects, true  );
  
      if ( intersects.length &gt; 0 ){
  
          var point = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshBasicMaterial({  color: 0x00ff00 }));
          point.position.copy(intersects[0].point);
          point.lookAt(camera);
          panoVideoMesh.add(point);
      }
  </code></pre>
  
  <p>This kind of works but the meshes being added are not in the same place as the mouse click, and when you rotate the camera by clicking and dragging the scene (it's a VR scene) the points are all on the same plane. </p>
  
  <p>Any help/clues!?</p>