# Product Overlay on 3D model

**URL:** <https://forum.babylonjs.com/t/product-overlay-on-3d-model/38046>\
**Category:** Questions\
**Created:** [February 9, 2023, 1:52am UTC](https://forum.babylonjs.com/t/product-overlay-on-3d-model/38046 "2023-02-09T01:52:06Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Doombringer1000](https://avatars.discourse-cdn.com/v4/letter/d/c4cdca/32.png) [@Doombringer1000](https://forum.babylonjs.com/u/Doombringer1000)\
**Post date:** [February 9, 2023, 1:52am UTC](https://forum.babylonjs.com/t/product-overlay-on-3d-model/38046/1 "2023-02-09T01:52:06Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![inteja](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/inteja/32/22553_2.png) [@inteja](https://forum.babylonjs.com/u/inteja)\
**Post date:** [February 9, 2023, 2:22am UTC](https://forum.babylonjs.com/t/product-overlay-on-3d-model/38046/2 "2023-02-09T02:22:20Z")

</div>

Hi and welcome to the community @Doombringer1000

You could tackle it either way.

Using Babylon.js GUI allows you to [easily create linking lines](https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#tracking-positions) 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](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/3X/4/4/44abf27a26c30506d60c6c54e2134cebd5d7e111.jpeg)

> **[Difference | Crimsafe Security Systems | Australia](https://crimsafe.com.au/the-crimsafe-difference/)**
>
> The Crimsafe difference sets us apart from our competitors, with over 25 years' experience with protecting Australians and their homes. Read more.

---

<div class="post-metadata">

**Author:** ![Doombringer1000](https://avatars.discourse-cdn.com/v4/letter/d/c4cdca/32.png) [@Doombringer1000](https://forum.babylonjs.com/u/Doombringer1000)\
**Post date:** [February 9, 2023, 2:39am UTC](https://forum.babylonjs.com/t/product-overlay-on-3d-model/38046/3 "2023-02-09T02:39:11Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![carolhmj](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/carolhmj/32/25918_2.png) [@carolhmj](https://forum.babylonjs.com/u/carolhmj)\
**Post date:** [February 9, 2023, 10:30am UTC](https://forum.babylonjs.com/t/product-overlay-on-3d-model/38046/4 "2023-02-09T10:30:28Z")

</div>

There’s a nice in depth tutorial at the docs of something like that too 😃 [3D for E-Commerce - Custom Experience | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/guidedLearning/devStories/vaporwearConfigurator)