Click listener on custom geometry in the overlay scene - Autodesk forge viewer

Question

I have added a custom geometry on the 2D screen of forge viewer

     const geom = new THREE.SphereGeometry(10, 8, 8);
     const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
     const sphereMesh = new THREE.Mesh(geom, material);
     sphereMesh.position.set(1, 2, 3);
     viewer.impl.createOverlayScene('custom-scene');
     viewer.impl.addOverlay('custom-scene', sphereMesh);
     viewer.impl.invalidate(true);

How do I add a click listener on the mesh of this overlay scene.

Answer 1

TL;TR: https://forge.autodesk.com/blog/handling-custom-meshes-selection-along-model-components-forge-viewer

Since Forge Viewer is based on three.js, when customizing the Viewer, you either rely on Viewer's API, or you can go deeper, use three.js API or even more deeper, WebGL.

In your case, you created a custom geometry using three.js, which is lower level than the Viewer API, and you cannot expect that Viewer can interact with it. Thus, since (by creating a three.js geometry) you are at three.js level, you'll have to rely on three.js API to handle the custom geometry selection.To achieve this, usually raycasting is used and there are lots of tutorials around it, some of them being:

• https://threejsfundamentals.org/threejs/lessons/threejs-picking.html ;
• https://riptutorial.com/three-js/example/17088/object-picking---raycasting ;

Those are generic ones and in one of the Forge blog posts there is an illustration of raycasting in context of Forge Viewer: https://forge.autodesk.com/blog/handling-custom-meshes-selection-along-model-components-forge-viewer