Optimize Raycaster intersectObject

Questions
2

“positionMarkers” is getting called every frame, and each marker is doing a raycast.to check if it is occluded (behind the object).

Since your model is pretty dense (lots of triangles) this is really slow.

There are a few different ways to address this…

  1. Use an invisible low poly version of your model that you do the raycasting against.

  2. Use the CSSRenderer but integrated more deeply with threejs. Instead of having it as an overlay on top of the scene… put the cssrenderer Behind the threejs scene, and then for each marker you have the CSS version, and in the threejs scene, and invisible “cutout” mesh to punch through the canvas revealing the CSS markers behind the canvas.
    This is REALLY tricky to get right, but if you get it, then you don’t need to do any raycasting at all… Markers will just naturally go behind the model.

  3. Instead of raycasting… do something simpler like checking if the marker.position.distanceTo(camera.position) is less than < model.position.distanceTo(camera.position)
    This is a relatively cheap check but won’t be as accurate as the raycast solution.

  4. Instead of using CSS for the markers, use a THREE.Sprite or similar and place that in your 3d scene. Then it will naturally disappear behind the model.
    The downside of this, is that you will then have to implement your whole marker clicking pipeline by raycasting against the list of marker sprites.

  5. Use mesh-bvh to accelerate the raycasting on your complex mesh.

  6. Use some kind of existing framework for this that has prepackaged solutions to this problem. :smiley: There may be something like this in the r3f/drei ecosystem.