search

pmndrs / react-three-fiber

🇨🇭 A React renderer for Three.js
https://docs.pmnd.rs/react-three-fiber
MIT License
27.62k stars 1.6k forks source link

fix: pointer move attempts to intersect geometries causing intense lag #3373

Open FlafyDev opened 1 month ago

FlafyDev commented 1 month ago

After adding a OrbitControls to the canvas and loading a relatively big STL file (50mb). Performance is really bad when the pointer is moving over the geometry.

Using Chrome's performance diagnostics tool, I found out that happens because this library attempts to intersect the geometry the pointer is on every pointer move event. Not sure if this is the correct solution, but it cancels the intersection calculations on pointer move.

codesandbox-ci[bot] commented 1 month ago

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 574ec3efbb680a4a5f302030d68c2f542abe0876:

Sandbox Source
example Configuration
FlafyDev commented 1 month ago

Similar thing happens when scrolling(zooming). Maybe it's better to change the condition to if pointer up/down rather than if pointer not moving? Then again, I'm not sure what this intersection is for.

FlafyDev commented 1 month ago

Even with this change, there is still lag when panning the camera (pointer down and up events). No lag when dragging the camera(pointer move event).