Interactive hotspots on model

Questions
1

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!

2

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 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!

3

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

4

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

2 Likes
5

Thanks Marian.

1 Like
7

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

8

On this ? https://www.babylonjs-playground.com/#RQ2T0A#18

9

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

10

This is really strange…

image
image681Ă—596 58.6 KB
What browser are you using ?

11

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

12

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

13

Well, that’s a lot easier than the above. :smiley:
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. 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,

1 Like
14

3D for E-Commerce - Custom Experience | Babylon.js Documentation (babylonjs.com) has a very nice example of hotspots

1 Like