Babylonjs hotspots/annotations

Questions
1

Hi guys. How can I create something like this with Babylon?

https://modelviewer.dev/examples/annotations.html

I know there is a way to connect GUI with the mesh in Babylon. But I am not sure how it works when user places the hotspot on the model. How can I detect that position on the model and add hotspot there which will then properly be linked to that position in 3D space.

This is type of annotations I am looking for (it should be fairly simply to create this using GUI)

image

2

Hey, you can simply create dummy meshes (set with visible = false), attach that mesh to the parent mesh and call it a day :smiley:

2 Likes
3

Oh, that’s interesting. So I could create dummy mesh and on user click I could place that mesh on the position where is clicked on the model (so something like using picking rays to determine where it is clicked in 3D space). And with that dummy mesh I create GUI element which is parented to it, that way it will look properly in the scene, and I can even detect when the mesh is occluded, so I can make GUI element less/or no visible in the scene.

Could this work like that?

4

yep!

1 Like
5

Yea. I feel like this solved my problem, even though I didn’t implemented it yet. Thank you for the great thinking. As always, life is easier with you guys. I am constantly grateful that I chose to work with Babylon instead of any other engine, you guys are amazing. :slight_smile:

2 Likes
6

Please spread the word :wink:

4 Likes
7

any playground example for this.

8

Hey, this is a quick playground I made.
https://playground.babylonjs.com/#EES9W5#4

Instead of creating a sphere you can create gui.

2 Likes
9

Okay, But can we use normal html and css customized hotspot on this. and you used the following lines in the sample playground.

scene.onDispose = function(){
        scene.onPrePointerObservable.removeCallback(onPointerDown);
    };

What is the purpose of it?

10

I am sorry I don’t know what you mean by this.

Also It is good practice to remove an observable when it is not being used. Because we added a POINTERDOWN observable on scene(line 49) we want to remove it when the scene is removed which is what is happening in this code. The onDispose is called when the scene is being disposed.

1 Like
11

Thanks for your kind reply. Actually my need is , create some hotspots in webgl scene. But the hotspots should be created with the html and css, like a rounded image for hotspot and while clicking it some effects needs to be happened using css. is it possible ?

////
please have a look into the below link. In this some hotspot has been made with html and css .

I need this kind of hotspots in webgl scene. Is it possible

12

I think you should use Babylon GUI for the hotspots and change css on button click like you normally would. You might have to change your logic to open the popups.

1 Like
13

If you definitely need html you would need to rely on the unproject functions from the maths lib to find your css position in the canvas so you could manually mix and match them

14

@sebavan Thanks for your reply. Any other way except html available in babylonjs to get a hotspot like this? Actually I tried Sprites. but when I use it and the performance is very low. So only I am searching some other way.;

15

Sprites should be fast not sure why they would be slow Could ypu share a repro ?

1 Like