How to keep my GUI always available

When I enable the Inspector, it stays visible all the time, but my own GUI is rendered inside the scene and is only visible when it is within the camera’s field of view.

How do I make my GUI stay in one spot on the screen the way that the Debug Inspector does?

This is because inspector is pure HTML and not GUI code

After a lot more digging and reading the docs, it looks like the BABYLON.GUI.GUI3DManager is only for creating UX that is within the scene (and optionally moves with objects in the scene), and the older 2D GUI is what you need to create the UX that sits outside the scene.

See Use the Babylon GUI - Babylon.js Documentation for how to create a GUI that stays visible regardless of how you move the camera within the scene.

Sorry I misunderstood the ask :slight_smile:

NP, I will eventually answer all of my questions. It’s all in the docs or PG examples somewhere :slight_smile:

The docs are misleading on this though. The GUI docs say “There is a new 3D version available” which sounded to me like the old 2D GUI was replaced by a better one that is 3D instead of 2D, but this is not really the case.

well can you point @PirateJC to the misleading line in the doc?

Your headings don’t have ids so I can’t link right to the paragraph, but it’s on this page Use the Babylon GUI - Babylon.js Documentation right before the “Introduction” h2.

Another note to @PirateJC, if you change the heading to <h2 id='introduction'>Introduction</h2> then I would be able to deep link to it like this Use the Babylon GUI - Babylon.js Documentation.

Thanks guys.

Ahh, my deep link works because you used <a name="introduction" class="anchor" href="#introduction"></a> instead. I usually use the id because it’s simpler.

Thanks for flagging this @Bikeman868!

How’s does this sound? A bit less misleading?

“Please note, in addition to the Babylon 2D GUI system described below, with Babylon.js v3.3 and higher, you also have a 3D GUI system available to leverage as well. Both systems can be used for different needs for your project.”

Yes, that’s very clear. Thank you.

Sweet! I’ve made this change to the documentation. Just an FYI - We are completely overhauling the documentation for the upcoming 4.2 release, so you will not see this change right away, but you will soon!

1 Like