I would like to know what the pointerdown event actually does, it pulls my cpu pressure to 100%!

I modified the materials and outlines of the model, I wanted it to display more like a wireframe.

After it renders, as soon as I click on the screen, I don’t know exactly what it’s computing, but the pointerdown event takes a super long time to execute straight away. I haven’t added any loops inside my own code, and I’m not sure what I should do to fix this!

  useEffect(() => {
    const model = modelRef.current;
    if (model) {
      model.traverse((child) => {
        if (child instanceof Mesh) {
          // 保存原始材质
          if (!child.userData.originalMaterial) {
            child.userData.originalMaterial = child.material;
          // 设置子组件的材质
          if (isWireframe) {
            // 创建线框材质和轮廓线对象
            const wireframeMaterial = new LineBasicMaterial({ color: 0x000000 });
            const edges = new EdgesGeometry(child.geometry);
            const outline = new LineSegments(edges, wireframeMaterial);
            // 将轮廓线对象添加到子组件中
            // 设置实心的白色材质
            child.material = new MeshBasicMaterial({ color: 0xffffff });
          } else {
  }, [isWireframe]);

Callback of pointerdown is called everytime pointer is over the element and any button is pressed. So if the user holds the mouse button down and moves the pointer around, as long as the cursor is above the object, the callback will keep executing at every frame, a looot of times.

But it seems the code snippet you’ve shared doesn’t include the event assignment or callback?