I would like to create a 3D scene in my React project using @react-three/fiber where the user is displayed a 3D model of a car, and he can select a "car part" (for instance, the hood, or the front door right) by clicking on it.
I am already able to display the 3D model (loaded from a *.GLB file) and the whole scene using the PresentationControls from @react-three/drei. My blocking point here is understanding what approach I could use to "detect" the click on the car part.
My naive guess would be to have one *.GLB file per car part, and each GLB file model would perfectly fit with the others when loaded into the application. Could this work? Wouldn't this be a bit too heavy to load that much GLB files at the same time? Do you think there could be a better approach to this both in terms of performance efficiency and practicality?
Thanks
No, you do not need to "load" separate GLBs. Of course you can do this, but it is, to put it mildly, the wrong approach. The first thing you need to do is prepare a car model (I assume you already have it).
Then, in some program (e.g. Blender), separate all the parts that are to be interactive and name them. Then catch them with .getObjectByName and manipulate them as you wish.
Look at this topic How to visualize 3d cad models and its movementable parts with three.js?