Is it possible to develop this kind of 3D configurator?

Hi there!

I’d like to know if is possible to develop this kind of configurator in babylon.js?

We already developed 3D configurators with babylon.js, but we would like to add an additional feature:

  • The possibility of adding a logo to the 3D object and position it in a specific location as in the example

Thanks for your help.

Oh yes no problem at all :slight_smile: Wayfair, Ikea and many more are doing kind of the same :slight_smile:

Also the great @syntheticmagus is working on a golden path to specifically address this question

1 Like

That is totally possible. I think the way they did it with a Vue app in an i-frame loading sketchfab in another i-frame and communicating via Sketchfab viewer API is a bit cumbersome. I think you would have a better solution directly with babylonjs. What they are doing to change the logo is a set texture call - you can have that positioned with UV mapping.

Yes, totally, checkout this 3D Material configurator with editable Texture transforms (rotate/offset/scale/flip/etc.). Upload any Texture file on the fly, or even combine different textures (the site currently is under development, so you may get errors while playing with the material editor):
demo_material

Custom Logo is just a matter of uploading transparent logo as Texture file and not repeating the texture. Or use Babylon Decal.

However, if you try to mix GLTF files from right handed system with Babylon built-in meshes using left handed system, there are issues currently.

3 Likes

Decals | Babylon.js Documentation (babylonjs.com) are perfect for this kind of thing :slight_smile:

Just checking in to remind that @syntheticmagus 's amazing e-commerce Golden Path was released going deep into this topic: Golden Paths: E-Commerce - Announcements - Babylon.js (babylonjs.com)

1 Like