Correct way to use Raycaster in r3f?

[antonbehaeghe]

Hey,

I'm working on a small learning project where I would like to build a stadium seating editor type thing.
I've built out a small example to see how to get it working and I think I'm pretty close.
https://codesandbox.io/s/hungry-lake-0gioc?file=/src/App.js

The idea here is to use an input to generate textGeometry, and then use a Raycaster to check which seats (cubes here) overlap with the text, and color those in.

This does seem to work however I'm really unsure about the performance. I could not find any real examples of how to use the Raycaster in r3f, so I tried to figure it out. Is it problematic to run it in a useEffect with this many objects?

I guess my question is this, are there any more resources about using the Raycaster in r3f and is this even the best approach to tackle something like this?

Thanks!

[drcmda]

you use it the exact same way as in plain three. if you use it inside useeffect that means it executes only once, generally raycasting can be very expensive so limiting the amount of having to call it seams reasonable to me. but ofc that means your camera has to be static. if you ran it in useFrame it would execute each frame.

you can further improve raycasting performance by replacing the raycast check on the meshes, for instance: https://github.com/pmndrs/drei#meshbounds or using bvh: https://github.com/pmndrs/drei#usebvh