Mesh exists in the scene but is not intersectable

[geoff-harper]

Hello. I'm maybe 90% sure I'm having some trouble with a r3f interaction and not a three.js interaction.

I have a not huge obj mesh of about 33.5 MB that I'm trying to imperatively raycast on as soon as it's available via a ref and a useEffect hook. At the time of calling intersectObject, I am confirming that the ref is pointing at a Mesh instance and I've also rendered an arrowHelper to confirm that the ray is properly placed. Unfortunately I'm not getting an intersection despite the arrowHelper shooting right through it. If I wrap the intersection function in setTimeout with a 0 delay, it solves the problem.

Seems fairly clear that it's a race condition of some sort. Is it possible that a <mesh ref={...} /> would populate the ref without being in the scene yet? I'd like to determine if there's a shortcoming my code and if there's a geometry/mesh load event that I can use, or if it's something with the library itself

Some side details:

• I'm locked to version 6.2.3 currently with no option to upgrade
• I have matrixAutoUpdate as false on the mesh but I've confirmed I call updateMatrix on the mesh ref before raycasting

Apologies if this is the wrong place for this, I thought it sat on the border of issue and tutorial help. Thanks for the library you've put out, it's vastly improved the OOP spaghetti I had before

[CodyJasonBennett]

Refs are populated in time for useEffect and (newer) three versions should recursively intersect your model.

Can you create a codesandbox with your setTimeout workaround? This is 100% a react/three issue if you're not using our built-in events.

[drcmda]

similar problem here: #2159

you need to make sure the matrices are calculated, gl.render calls updateMatrixWorld. i believe react hooks are scheduled to fire first, so the meshes exist, and they are part of the scene (you can easily verify that with a log) but they haven't been touched by the renderer yet. i believe updateMatrix is not enough, isn't that just he relative position?

[geoff-harper]

Unfortunately I'm unable to do a sandbox currently but I can show the relevant code

useEffect(() => {
function findBubbles(): void {
  const mesh = getMeshRef();

  const startPosition = new Vector3();
  const rcDirection = new Vector3();

  const bubblePairs = bubbleIds
    .map((id) => {
      const bubbleMesh = scene.getObjectByName(bubbleId);
      const bubble= bubbleById[bubbleId];

      startPosition.fromArray(/* arbitrary Vector3 from other part of system */);
      rcDirection.subVectors(bubbleMesh.position, startPosition).normalize();

      raycaster.set(startPosition, rcDirection);
      const intersects = raycaster.intersectObjects([bubbleMesh, mesh]);

      // more code that decides what to do based on raycast results

  })
}

// setTimeout(findBubbles, 0);
findBubbles();
}, [...]);

Neither bubbleMesh nor mesh get intersected despite proper math ray orientation. getMeshRef can be seen here

const getMeshRef = useCallback(() => {
  return meshRef.current;
}, []);

return (
  <>
    <mesh
      ref={meshRef}
      name="model"
      material={ctx.assets.material}
      geometry={ctx.assets.geometry}
      matrixAutoUpdate={false}
      visible={isMeshVisible}
      onClick={handleClick}
      onPointerDown={handlePointerDown}
    />

    {children && children(getMeshRef)}
  </>
);

The first code block is a child of the second, and receives getMeshRef as a prop. Everything is truthy and seems to be in order.

As an aside, I guess there isn't a better approach than this? I couldn't find a way to do this reactively instead of imperatively