# Interactive hotspots on model

**URL:** <https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558>\
**Category:** Questions\
**Created:** [July 16, 2019, 7:53pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558 "2019-07-16T19:53:13Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![EvilTwinsNiceBrother](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@EvilTwinsNiceBrother](https://forum.babylonjs.com/u/EvilTwinsNiceBrother)\
**Post date:** [July 16, 2019, 7:53pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/1 "2019-07-16T19:53:13Z")

</div>

Hello,  
i need to build a web-app which is able to load 3d models and show interactive hotspots on the model.  
I came across babylonjs and the performance is stunning and everything looks really great.  
I guess creating hotspots that the user can interact with should be possible with the library?

thanks!

---

<div class="post-metadata">

**Author:** ![PolygonalSun](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/polygonalsun/32/2704_2.png) [@PolygonalSun](https://forum.babylonjs.com/u/PolygonalSun)\
**Post date:** [July 16, 2019, 9:08pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/2 "2019-07-16T21:08:04Z")

</div>

Hey @EvilTwinsNiceBrother,  
First of all, welcome to the Babylon.js forums!

You should be able to accomplish what you’re looking to do with Babylon.js. I’d imagine it’d just be a matter of loading the model into a scene and adding a HighlightLayer to your desired mesh, depending on the specifics of the scenario you’re looking to support.

In any case, if you want, you can always check out our [Playground Search](https://doc.babylonjs.com/playground/) if you want to find user-provided code snippets that may help you out too.

If you have any question about stuff, feel free to ask!

---

<div class="post-metadata">

**Author:** ![EvilTwinsNiceBrother](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@EvilTwinsNiceBrother](https://forum.babylonjs.com/u/EvilTwinsNiceBrother)\
**Post date:** [July 16, 2019, 9:22pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/3 "2019-07-16T21:22:03Z")

</div>

Thanks for the great welcome.  
What I am trying to achieve is basically various red dots on the model which can be touched to display an info overlay.  
Will check the playgound

---

<div class="post-metadata">

**Author:** ![MarianG](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mariang/32/138_2.png) [@MarianG](https://forum.babylonjs.com/u/MarianG)\
**Post date:** [July 17, 2019, 12:25pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/4 "2019-07-17T12:25:27Z")

</div>

[https://www.babylonjs-playground.com/#RQ2T0A#18](https://www.babylonjs-playground.com/#RQ2T0A#18)  
you have to add the panel to display the text on click it

---

<div class="post-metadata">

**Author:** ![EvilTwinsNiceBrother](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@EvilTwinsNiceBrother](https://forum.babylonjs.com/u/EvilTwinsNiceBrother)\
**Post date:** [July 17, 2019, 1:02pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/5 "2019-07-17T13:02:53Z")

</div>

Thanks Marian.

---

<div class="post-metadata">

**Author:** ![EvilTwinsNiceBrother](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@EvilTwinsNiceBrother](https://forum.babylonjs.com/u/EvilTwinsNiceBrother)\
**Post date:** [March 11, 2020, 3:13pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/7 "2020-03-11T15:13:53Z")

</div>

Hm.  
Well, I tried t figure out the Playground demo. But it does not seem to work.  
just a blue background.

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [March 11, 2020, 3:27pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/8 "2020-03-11T15:27:21Z")

</div>

On this ? [https://www.babylonjs-playground.com/#RQ2T0A#18](https://www.babylonjs-playground.com/#RQ2T0A#18)

---

<div class="post-metadata">

**Author:** ![EvilTwinsNiceBrother](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@EvilTwinsNiceBrother](https://forum.babylonjs.com/u/EvilTwinsNiceBrother)\
**Post date:** [March 11, 2020, 3:41pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/9 "2020-03-11T15:41:41Z")

</div>

Nope. This time i see the yeti but no “onClick” mesh

---

<div class="post-metadata">

**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\
**Post date:** [March 11, 2020, 4:07pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/10 "2020-03-11T16:07:31Z")

</div>

This is really strange…

 ![image](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/8/8e15145d70e7d959f9439975b90a54c6c3a7e17d.png) What browser are you using ?

---

<div class="post-metadata">

**Author:** ![EvilTwinsNiceBrother](https://avatars.discourse-cdn.com/v4/letter/e/51bf81/32.png) [@EvilTwinsNiceBrother](https://forum.babylonjs.com/u/EvilTwinsNiceBrother)\
**Post date:** [March 11, 2020, 4:26pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/11 "2020-03-11T16:26:17Z")

</div>

Ah! Ok.  
it wasnt working in Safari ( 13.0.4 )  
Works in Chromium and Firefox

---

<div class="post-metadata">

**Author:** ![albaaaaagc5](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/albaaaaagc5/32/20203_2.png) [@albaaaaagc5](https://forum.babylonjs.com/u/albaaaaagc5)\
**Post date:** [September 5, 2022, 8:32am UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/12 "2022-09-05T08:32:44Z")

</div>

Hi guys! How could I add those hotspots directly on the scene without clicking?  
That is, every time you start the scene they are already loaded.  
Thanks

---

<div class="post-metadata">

**Author:** ![mawa](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/mawa/32/12384_2.png) [@mawa](https://forum.babylonjs.com/u/mawa)\
**Post date:** [September 5, 2022, 10:14am UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/13 "2022-09-05T10:14:08Z")

</div>

Well, that’s a lot easier than the above. 😃  
Actually, all you need is an anchor, a point or a transformNode or even just a mesh or an invisible mesh.  
Two solutions here: Either you create it straight in your model or you add it in BJS and parent it to your model.  
Next you can create your hotspot design (tooltip or whatever it is, i.e. using the 2D GUI or a DynamicTexture) and finally parent this to your anchor, point, transformNode or invisible mesh.

Here’s an [example of a tooltip using the 2D GUI](https://playground.babylonjs.com/#XCPP9Y#20). You have many other options towards how you want to build and display your hotspot/tooltip.

May be a little more explanation about how it’s supposed to show and how it should be interacted with could help us point you into a direction…

Meanwhile, hope this helps,

---

<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:** [October 4, 2022, 12:12pm UTC](https://forum.babylonjs.com/t/interactive-hotspots-on-model/4558/14 "2022-10-04T12:12:17Z")

</div>

[3D for E-Commerce - Custom Experience | Babylon.js Documentation (babylonjs.com)](https://doc.babylonjs.com/guidedLearning/devStories/vaporwearConfigurator) has a very nice example of hotspots
