Bounding Box calculation disable onClick events

[Draco112358]

Hi all!
I'm using r3f for a while and I've found a weird issue.
I've a simple code like this:

 <group key={keyComponent} onClick={() => dispatch(selectComponent(keyComponent))} 
                 position={postition} rotation={rotation} scale={scale}>
          <primitive object={mesh} />
 </group>

Now at the beginning the onClick events fires as expected, but moving the object around I've a useEffect that compute the bounding box of the mesh geometry and update it in my app's store:

useEffect(() => {
        mesh.geometry.computeBoundingBox()
        mesh.geometry.boundingBox().applyMatrix4(mesh.matrixWorld)
        dispatch(updateBoundingBox(...))
},[position, rotation, scale]) 

This triggers a rerender after which the onClick event won't work anymore.
I made some tests and I've found that the problem is in the applyMatrix4, in fact without it the event fires properly, but I cannot remove it if I want the bounding box is correctly computed.

I've also noticed that tags <...Geometry> like have a property computeBoundingBox, maybe it could be useful but there is no docs about it and I cannot understand what function I've to pass to it.

Hope someone will help me.
Thanks so much!

[drcmda]

the problem with centring geometry like that is that it stacks up. i would avoid mutating geometry like that. perhaps in this case it creates geometry that the raycaster isn't able to pierce any longer. you can center an object without messing with its geometry. see dreis center or bounds components for instance.

as for geometry, these are generic threejs objects, threejs docs list all the props. you don't set a function prop, you call it. for instance in a useLayoutEffect. in react setting a function prop just overwrites a function. <...Geometry computeBoundingBox={...} /> makes little sense, you just destroy that function. instead do: geometry.current.computeBoundingBox() while geometry here would be a ref.

[Draco112358]

Thanks for the answer! I need bounding box to detect collisions between objects not for centring geometry. So do you say that drei's bounds tag could be useful to comupute bounding boxes?

[drcmda]

you compute these using computeBoundingBox, like you did.

const ref = useRef()
useLayoutEffect(() => {
  ref.current.geometry.computeBoundingBox()
}, [])
return (
  <mesh ref={ref}>
    <...Geometry />

btw, i think what's wrong is that you need to update matrix before you do that. dreis center for instance calls obj.updateWorldMatrix(true, true) but here i don't really know, this is threejs specific and you will get better answers over at threes discourse or discord. i struggled with this a lot because the bounds it calculates were always wrong, until i update the world matrix.

btw where does the mesh come from. seeing a primitive being used is unusual unless you load a gltf or something like that.

[Draco112358]

Thank you so much! I've found the solution. First of all I make a mesh clone, than compute boundingBox on it and in the end I use its bounding box for dispatch, so the original mesh remains untouched and the onClick event fires as it would.