Handling custom meshes selection along model components in the Forge Viewer

Here is a question that came up from one of our customer when adding custom meshes to the Viewer scene: How to handle selection of those extra meshes and how to detect when one of those mesh is occluded by a component loaded as part of the Forge model?

My suggestion was to use a double raytracing approach: the custom meshes need to be checked against a ray using directly Three.js API rayCaster.intersectObjects, this will return the custom meshes being potentially selected, then using the viewer.model.rayIntersect method, perform a second raytracing to detect the components of the Forge model being selected. Each method also returns the distance between the origin of the ray and the intersection. By comparing those distances, you can determine which of the custom mesh or the component is being intersected first.

Below is a complete demo extension I created in order to illustrate that approach: it creates some random box meshes around the model (you may have to adapt the size range and position to fit your test model) and listens to click events in order to perform raytracing. The custom meshes being selected are dumped to the console.

Here is a recording of that code in action: