title: How to display a pop up data on mouse click event for the sphere objects which is overlayed on the 3D model(using Autodesk forge)
body: <p>I have created a project to display a 3d model in the viewer(using Autodesk forge). On top of it I have added a scene to display two sphere objects as shown in the <a href="https://i.stack.imgur.com/qgnUG.png" rel="nofollow noreferrer">image</a>
  I want to add a mouse click event for the sphere objects – On click of the sphere objects I need to have a pop up data. As I am a beginner, I am stuck in this click event of the overlayed scene. This is the github link of my project for reference(<a href="https://github.com/vennilabalaraman/SphereClick" rel="nofollow noreferrer">https://github.com/vennilabalaraman/SphereClick</a>). It will be helpful if I get solution for this. Thanks in advance.
  This is my javascript and html 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>let viewer = null;
  
  function setupViewer(divId, documentId, tokenFetchingUrl, exrtensionArray, AccessToken) {
      console.log('Entered setupViewer');
      let options = {
          env: 'AutodeskProduction',
          getAccessToken: (onGetAccessToken) =&gt; {
              fetch(tokenFetchingUrl)
                  .then(response =&gt; response.json())
                  .then(data =&gt; {
                      let accessToken = AccessToken;
                      let expireTimeSeconds = data["expires_in"];
                      onGetAccessToken(accessToken, expireTimeSeconds);
                  })
          }
      };
  
      var config3d = {extensions: exrtensionArray};
      Autodesk.Viewing.Initializer(options, () =&gt; {
          viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById(divId), config3d);
          viewer.addEventListener(Autodesk.Viewing.GEOMETRY_LOADED_EVENT,()=&gt;{
       //Create Custom Geometry
       //alert("Under Custom Geom");
       var geom = new THREE.SphereGeometry(0.05, 4, 5);
       var material = new THREE.MeshBasicMaterial({ color: 0xFF0000 });
       var sphereMesh = new THREE.Mesh(geom, material);
       var sphereMesh1 = new THREE.Mesh(geom, material);
       //sphereMesh1.position.set(11, 10, 30);
          sphereMesh.position.x = -5; sphereMesh.position.y = -0.8; sphereMesh.position.z = 1.8;
       sphereMesh1.position.x = -3.5; sphereMesh1.position.y = -1.5; sphereMesh1.position.z = 1.8;
       //Create Overlay scene
  
       if (!viewer.overlays.hasScene('my_scene')) {
        viewer.overlays.addScene('my_scene');
          }
          viewer.overlays.addMesh([sphereMesh], 'my_scene');
          viewer.overlays.addMesh([sphereMesh1], 'my_scene');
      });
          viewer.start();
          Autodesk.Viewing.Document.load(documentId, onDocumentLoadSuccess, onDocumentLoadFailure);
        });
  
        function onDocumentLoadSuccess(doc) {
          var viewables = doc.getRoot().getDefaultGeometry();
          viewer.loadDocumentNode(doc, viewables).then(i =&gt; {
            // documented loaded, any action?
          });
        }
        
        function onDocumentLoadFailure(viewerErrorCode) {
          console.error('onDocumentLoadFailure() - errorCode:' + viewerErrorCode);
        }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Example&lt;/title&gt;
      &lt;meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=no"/&gt;
      &lt;meta charset="UTF-8"&gt;
  
      &lt;!-- Autodesk Forge Viewer files --&gt;
      &lt;link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.min.css" type="text/css"&gt;
      &lt;script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.min.js"&gt;&lt;/script&gt;
  
  
      &lt;!-- Developer CSS --&gt;
      &lt;link rel="stylesheet" href="./assets/css/main.css"/&gt;
      &lt;!-- Developer JS --&gt;
      &lt;script src="app.js"&gt;&lt;/script&gt;
      &lt;script src="./assets/js/extensions/markupExt.js"&gt;&lt;/script&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div id="MyViewerDiv"&gt;&lt;/div&gt;
      &lt;script&gt;
          let divId = "MyViewerDiv";
          let documentId = 'urn:dXJuOmFkc2sub2JqZWN0czpvcy5vYmplY3Q6bmlzaGFudF90ZXN0Ml8yMDIwXzA0XzMvZ2F0ZWhvdXNlLm53ZA';
          let tokenFetchingUrl = "https://9irt90dm6j.execute-api.us-east-1.amazonaws.com/prod";
          let extensionArray = ['MarkUp3DExtension'];
          let AccessToken = "";
          setupViewer(divId, documentId, tokenFetchingUrl, extensionArray, AccessToken);
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>