¿How do you load multiple GLTF/GLB to model viewer and then "merge" them into a single one?

[LaloYanez]

Yes, it sounds like I want to use multiple models inside a single instance but its not the case. Let me explain a little.

I have recently stumbled upon a very nicely done car configurator built on model viewer. After exploring the options I noticed some things that felt off and took a peek at the code. First, the env map was not a sphere as usual but had a floor, it was possible to switch to different environments or none without loading a different model. The same thing was happening when different animations (doors opening, wheels rolling, airbags, etc. were not only playing separately but could also be active at the same time.

What I found is that indeed, there were 4 different gltf models in play, one for the dome that held the env map texture, the wheels, the inside and the outside of the car. I could not figure out how it was done by looking at obfuscated code but it was clear that somehow the gltf models were getting loaded and then merged in runtime.

I could not find anything about this after several hours of research and all I know is that the models were using draco compression, not sure if that has anything to do with it or its just to make the models lighter.

Any ideas?

[elalish]

Can you share a link? We do not yet support this, but we plan to add this kind of functionality to our scene-graph API. It's possible that they hacked their way down into the Three.js layer to make all this work. Definitely possible, but not encouraged as it's likely to be fragile whenever we make a new release.

[elalish]

Oh wow, you're right! I just tried it in WebXR mode and sure enough. And yeah, that look around feature inside the car is really nice. We will definitely keep this use in mind as we build out the scene-graph API, to make this kind of experience easier to build.

[LaloYanez]

Impressive huh!

Whenever I have the time Ill try to crack that multi model mystery, could be useful for configurator type experiences.

[felipe-chamas]

I think the "viewer of models" is implemented with Threejs while the model-viewer is used empty only to load the AR experience. If you search through Sources tab on devTools the implementation is Canvas based and has more to do with pure Threejs implementation.

[felipe-chamas]

Viewer implemented in three:

AR using model-viewer:

[LaloYanez]

Ohh makes sense, its a nice concept, close to what elalish thought they did. Thanks to both for figuring it out!