Organize GUI 3D elements horizontally and on sphere panel

Hello there,

I have a question regarding the 3D GUI. First of all, I am a complete beginner in the GUI stuff and don’t really understand when to use the Advanced Texture and when the GUI3D Manager. I have this XR project where need a game menu in the beginning to configure the game. The elements will be selected via laserpointer, but I haven’t implemented this yet.

So to my question how can I align my elements horizontally. Right now this is my GUI. I would love to have the image buttons side by side like in this playground. Can’t I organize it in a grid or something?

I would also prefer a Spherepanel but when changing the Stackpanel in my current playground to Spherepanel it says

t.__link is not a function

A similar error comes up when transferring my code to the sphere playground (I think it was t.__node is not a function). Somehow they seem to be incompatible and I can’t comprehend this errors. I would appreciate any help :slight_smile:

And I am greedy now :slight_smile: Is there any possibility to make image buttons with radio function? The configuration right now I would cheat with some function to make the buttons behave like radio.


Hi timkarl,

I think what you’re running into is problems trying to use ordinary GUI and 3D GUI interchangeably, and they’re not really things you can mix. An AdvancedDynamicTexture is strictly 2D element that can contain and display other 2D GUI elements. It doesn’t know anything about 3D, though, so you can’t put a SpherePanel into it. Trying to do so should generate helpful type errors in TypeScript, but coding in JavaScript won’t show you any errors until you actually try to run it, at which point you’ll get cryptic messages like the ones you mentioned.

Because of that, my first recommendation would be to port your prototype to the TypeScript Playground (the red “TS” button at the top of the Playground, in case you’re not familiar).


This may take a little fiddling, but it will allow the code itself to help you by telling you when different kinds of things can’t be mixed, so that should reduce the frequency of those cryptic errors. :slightly_smiling_face:

If your scenario is purely immersive XR (i.e., VR and not phone-based AR), I’d recommend pivoting away from ordinary GUI entirely and going fully down the path of 3D GUI. It doesn’t quite work the same way, but in many cases that’s a good thing – it’s designed to work differently because people will interact with it differently – and by directly copying and combining different pieces from the examples, you should be able to get the functionality that you’re looking for.

Hope this helps, and best of luck!


Hey @syntheticmagus

Thank you very much. My whole project is actually in TS but totally forgot you can do this in the playground. So thanks. I see, I thought they are in the same category because of the BABYLON.GUI in both cases. I will stick with one then. Thanks

1 Like