We have developed a unique PCB Viewer using THREE.js, but now we want to enhance it with selection functionality. While the task itself isn't complex and I have managed to make it work, I am encountering performance challenges. Our goal is to allow users to individually select and click on different features of the PCB layers, causing their colors to change. To achieve this, I decided to assign each shape its own THREE.js Mesh so we can control their Materials independently. The outcome was successful, but the drawback is the significant drop in performance due to having thousands of separate meshes instead of one combined mesh for all shapes on a layer.
I am aware that having numerous meshes impacts performance negatively. So, my question is, are there any suggestions on how to improve the efficiency of this process? Currently, our main focus is only on changing the colors of individual shapes when clicked. Initially, before modifying my code, all shapes were contained within the same geometry under a single THREE Mesh. Is there a way to maintain this simpler structure while still being able to manipulate individual shapes or objects separately? It may seem like a stretch, but as someone who lacks extensive experience in working with THREE.js, I am open to any insights or advice