Product Overlay on 3D model

Questions
1

Hey everyone, Im using react and importing a single .glb model file into a scene. I was wondering if theres a way to easily do like a product overlay with interactive clickable elements? e.g have different calls outs to a product feature.

should I:

  1. do it in GUI with babylonjs
  2. render the 3D model with babylon, then overlay a 2D HTML layer over the 3D canvas?

Any pointers or example will be appreciated

2

Hi and welcome to the community @Doombringer1000

You could tackle it either way.

Using Babylon.js GUI allows you to easily create linking lines between a mesh and a UI element or to make the UI part of the 3D scene itself rather than floating on top.

HTML might be easier if you need fully responsive layouts.

As part of a team at a previous employer we made this which uses HTML info above the 3D product, triggered by user interaction.

image
image1367×786 66.1 KB

5 Likes
3

Wow that looks great! Thanks i might give it a go thank you!

4

There’s a nice in depth tutorial at the docs of something like that too :smiley: 3D for E-Commerce - Custom Experience | Babylon.js Documentation (babylonjs.com)

3 Likes