Connecting drawn lines with objects with R3F and Redux

Questions
1

I’ve implemented a simple grid with ortographic camera using React Three Fiber and Redux. I’m also able to draw 2D polylines that snap to the grid’s vertices using the mouse on the grid by clicking to add line break points + double click to finish and save the line in the store.

Now I want to find a performant way to connect the line to any mesh object (ie. square) that’s added on the grid. Something like a diagram app or draw.io

One approach I thought of:

  1. Start drawing the line
  2. Use a raycaster to check if the line end (mouse pointer) collides or hovers over an object mesh
  3. If it hovers and if I double-click on the grid to finish the line, simply snap the line to the nearest base vertex of the mesh object
  4. Update the existing lines in the store with the new one which contains an attribute called “connectedTo”

Then, when I drag the mesh object, I would dispatch an action to update the ending position of any connected line to it.

Is the raycast hover approach a good and performant approach for this use case, especially if i want to add more lines and mesh objects in the future?

2

maybe this helps

raycast will be good for sure, but use bvh to speed it up