Performance issue after adding onClick event

Questions
, ,
1

I have already spent many hours on this, but I have no idea why this is happening.

When I try to add any event to group or mesh (for example simple onClick), performance drops drastically. Zooming takes a few seconds.

FPS during zoom:

  • With onClick: >10
  • Without onClick: 60

If I will remove onClick, everything works fine…

PS. model.glb is very advanced.

Code:

const Model = () => {
  const { nodes } = useGLTF(`model.glb`);

  return (
    // Why this onClick is so problematic? 
    <group rotation={[Math.PI / 2, 0, 0]} onClick={() => null}>
      <mesh geometry={nodes.Element.geometry} material={material} />
    </group>
  );
};

<Canvas>
  <Model />
  <OrbitControls />
</Canvas>
2

zooming taking … seconds doesn’t sound normal.

can you make a repro, using codesandbox? a chrome devtool performance tab snapshot would also be interesting so that you see where it spends time processing. im guessing it will be THREE.RayCaster.intersectObjects that takes the most time.

raycasting can be expensive depending on the model and how many vertices, but fiber optimises events, it shouldn’t cast every frame (which would be pointermove) if only click is registered.

1 Like
3

@drcmda thank you for your suggestions.

It looks like useBVH helped me.

I understand that this function helps with the raycasting process, but the description in the documentation is very brief.

4

better check the official site for bvh, it’s a very powerful library

1 Like