performance issue with onPointerMove

[undone plover]

hi, currently I'm facing to performance issue while using onPointerMove to draw a dot where mouse coordinates is
But when I use the event, even with empty function, it caused app become more laggy with model rotation or zoom in, zoom out, does anyone know how to work around, customize or fix this case?

my package.json

"dependencies": {
    "@react-three/drei": "^9.105.6",
    "@react-three/fiber": "^8.16.3",
    "leva": "^0.9.35",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.23.0",
    "three": "^0.164.1",
    "web-vitals": "^2.1.0"
  },
  "devDependencies": {
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^13.0.0",
    "@testing-library/user-event": "^13.2.1",
    "@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "@types/three": "^0.164.0",
    "eslint-import-resolver-typescript": "^3.6.1",
    "eslint-plugin-import": "^2.29.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.4.2"
  },

[mental urchin]

Use use-effect function

[fast zinc]

sometimes just logging to console can slow rendering down, but assume it's not that ...

the cost of raycasting is normally proportional to the number of vertices or triangles in your mesh, do you know what the vertex count is on this mesh?

if you can simplify the mesh without losing visual quality, that's always good. otherwise you can use a simpler mesh for raycasting than for rendering, or plug in something like https://drei.docs.pmnd.rs/performances/bvh to accelerate your raycasting.

[undone plover]

I used STLLoader to read a STL file to get its geometry, vertext count by using geometry.attributes.position.count is 1067064 🥲

[undone plover]

how can useEffect can track mouseMove? I can't catch it, could you give me more details please? ^^

[fast zinc]

Ah yeah, that's going to take a long time to raycast over 1M points. Won't be able to do that on every mouse movement for this mesh. I think you'll need either to simplify the mesh or use the BVH library.

[undone plover]

I used to try this example https://threejs.org/examples/webgl_modifier_simplifier.html to simply the mesh but look like the model caused library bug while simplifying. I'll try to use BVH as your advice ^^

[fast zinc]

SimplifyModifier is kind of the "last resort" for simplification, it's better if you can do that offline in something like Blender, and then the file you're downloading will be smaller/faster too. But BVH should be able to handle it either way I think.

here's another option for simplification if you need to do it in the browser, too:
https://jsfiddle.net/donmccurdy/84acgydp/