title: Mouse point to viewer coordinates
body: <p>I have successfully added a cricle into the viewer using the following code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function addCircle(){
  
    cameraHUD = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 30);
    viewer.impl.createOverlayScene('leaderOverlay-circle',null,null, cameraHUD);
  
    var circle_geometry = new THREE.CircleGeometry(10, 32);
    var circle_material = new THREE.MeshBasicMaterial({color: 'rgb(1,1,1)'});
    var circle = new THREE.Mesh(circle_geometry, circle_material);
    circle.position.set(100,100,0);
  
    viewer.impl.addOverlay('leaderOverlay-circle', circle);
    viewer.impl.invalidate(true)
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>I now  want to add this circle at a point that is clicked in the viewer. My attempts to do this are as follows but the coordiantes are not accurate to the point being clicked on the screen:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function onClick(ev) {
  
    var wtc = viewer.clientToViewport(ev.clientX - bounds.left, ev.clientY - bounds.top);
    var projectedPoint = new THREE.Vector3(leader.endPoint.x, leader.endPoint.y, leader.endPoint.z);
    projectedPoint.unproject(cameraHUD);
    var circlePosition = viewer.worldToClient(new THREE.Vector3(point.x, point.y, point.z));
  
    cameraHUD = new THREE.OrthographicCamera(-width / 2, width / 2, height / 2, -height / 2, 0, 30);
    viewer.impl.createOverlayScene('leaderOverlay-circle',null,null, cameraHUD);
  
    var circle_geometry = new THREE.CircleGeometry(10, 32);
    var circle_material = new THREE.MeshBasicMaterial({color: 'rgb(1,1,1)'});
    var circle = new THREE.Mesh(circle_geometry, circle_material);
    circle.position.set(circlePosition);
  
    viewer.impl.addOverlay('leaderOverlay-circle', circle);
    viewer.impl.invalidate(true);
  
  }</code></pre>
  </div>
  </div>
  </p>