What could be the best way to add floating information labels to a skydome like that Sample Tour | Marzipano
I mean that icons with an ‘i’ that open a text/image/whatever with pretty nice styling. I was thinking about using Bootstrap for the labels, text frames and so but I cannot imagine how to place it and move them with the camera rotation.
Thank you!
Maybe using GUI?
https://doc.babylonjs.com/how_to/gui
It could be for some small things but obviously a dedicaded library like bootstrap can make it even easier/better, please do not take this like an attack, I really love Babylon, but obviously you cannot be the best in everything!
Also since Babylon uses a canvas it cannot render regular html with nice css and so (or at least I cannot imagine how).
Hi @Escobar
The demo you linked uses simple HTML.
The Babylon GUI can easily simulate this.
Quick sample; Babylon.js Playground
Another sample, this using Object.assign, allowing a more CSS-style approach.
https://playground.babylonjs.com/#GVBK5L#1
If you want to use HTML, use HTML, if you prefer or need everything to be within the canvas element, use GUI.
You can easily generate 2D coordinates from 3D coordinates to position your label on screen with HTML/CSS.
Have a look at this thread Check if a point is in front or behind the mesh and PG https://playground.babylonjs.com/#CUH660#3. In this PG, I draw in CSS two squares, given two 3D positions.
If you need that the “i” icons be transparent when they are behind something (which was the purpose of the thread), don’t do it as I did, copying the zbuffer is taxing to do each frame.
Do it as @Makc3d did in this thread How to create Sketchfab like annotations with Three.js? - Questions - three.js forum - it’s a 3js thread, but the technic is not specific.
To sum it up, use two “i” icons, one normal and one with transparency on + depth test false. Both will be drawn on each other. Where parts of the normal icon are not drawn (because behind something), the same part of the transparent one will still be drawn because the depth test is disabled.
Thank you both but I was not only speaking about the button but the label that is open that can contain html, videos and so.
You can easily generate 2D coordinates from 3D coordinates to position your label on screen with HTML/CSS.
@Evgeni_Popov none of your examples seem to work. There is white screen only and ‘not a constructor error’
This one works perfectly https://playground.babylonjs.com/#CUH660#3
Thanks @labris. Already found another one that also seems to be working fine.
https://playground.babylonjs.com/#41IFI5#16
This one is also working for me: https://playground.babylonjs.com/#CUH660#1
Yeah. I clicked all of them again. I think it might have been an issue with my browser. Sorry about confusion. 
Really Cool! But is there a way to create a correct scaling system for these html elements when you zoom in/out?
But if you need them to scale, why not simply use planes in this case ?
It would’ve been nice to have an html/css solution, its not possible ? I’ll work around it using other solutions offered here if its not, sure.
It is but you would never be able to hide them (or not easily) if the markers were behind a mesh for instance as they would not be part of the 3d rendering but only display on top of it