Is it possible to replace parts of a gltf object without replacing the whole model?

I’m trying to add an option that would replace the wheels of my car object, upon click. Currently, I’ve only managed to get that effect by replacing the current car object with a different one that features a different set of wheels. There must be a simpler way right?

There is but you would need a declarative layer for that, see GitHub - pmndrs/gltfjsx: 🎮 Turns GLTFs into JSX components this would give you complete freedom to remove or add parts, make them conditional, alter them etc. The model remains re-usable and can be duplicated without cloning.

Otherwise you only have traverse, findByName, add and remove. You will destroy the source data as well. It’s a fundamental difference between imperative and declarative code design.

1 Like

You normally want to prepare the asset first in order to modify or exchange certain parts of it. So it instead of having a single mesh for representing the entire car, the asset should be built-up based on multiple meshes organized as a hierarchy of 3D objects. So the wheels, rims, chairs etc. are independent 3D objects just grouped together. The granularity of your asset primarily depends on your use case.

If you have an asset prepared in this way, you can use ordinary raycasting to detect single components and then modify it based on your requirements.

1 Like

You are right. I managed to get the desired result without switching to React by separating the parts of the car and using GLTFLoader separately to load each part. This way I can replace one part of the car without replacing the entire object. React solution would have probably been better but this is what I’m working with currently. Thank you for the idea.

Thank you for the idea, I was trying to avoid using React since I’m still a beginner at JS and since now I got what I wanted, as a next step, I will probably try to switch the project to React.