Editing externally imported 3D object

Hi there,
I’m working on a project where I would need to import a 3d model from an external source (in .obj or .gltf format) and then be able to make edits on the imported model.

For example, if I import a model of a car from Sketchfab, I will have checkboxes for items such as door, windshield, tire, etc. When I click on any checkbox, the item should be removed, and when I uncheck it it should re-appear.

I’ve seen examples on the three.js examples page where one can load a model and make changes such as add flat shading. I also see examples where on can create a 3D model within three.js and edit, however, I do not see an example where I can import an externally object and then make changes on that.

Can someone direct me to documentation on how I could achieve this?

There is no documentation that will guide you through all steps that are necessary to build such an application. If you just want to hide/unhide certain parts of a complex object like a car, you have to ensure that the geometry of the model is divided up into several independent objects. This is something you have to ensure when modeling the car (e.g. in Blender). So all components (like the doors, wheels etc.) are separate 3D objects but grouped together to form a more complex object.

With this preparatory work it’s much easier to control what parts of the car should be visible in your 3D application. If each component has its own material, it’s also possible to change the color or surface properties for this component.

1 Like