CODEWITHSUNDEEP
three.jsautodesk-forgeautodesk-viewerforge
rahul_shinde11
rahul_shinde11

Reputation: 3

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

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.

Upvotes: 0

Views: 963

Answers (1)

denis-grigor
denis-grigor

Reputation: 515

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:

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

Upvotes: 2

Related Questions