PlanePanel position and background

[Dshah_H]

Hi,

I have created a menu using BABYLON.GUI.PlanePanel , PG is here
https://www.babylonjs-playground.com/#HTYAW1#1

I have few issues understanding

1. I want to display menu of BABYLON.GUI.PlanePanel only when I click on helpBox Ellipse ( line 75) , and when I re-click helpBox it should hide menu.

2. As I understand BABYLON.GUI.PlanePanel with included menu have a fixed position to display , which I have set with:

panel.position.x = 90;
panel.position.z = 2250;
panel.position.y = 150;

what actually I wanted to achieve is, to display it in middle of screen, and I shouldn’t be able to move camera until the menu is visible.

3. add a transparent background to BABYLON.GUI.PlanePanel. with some padding and border-radius and a close button, and when click on close button it should hide menu. as an example I added below screenshot

How could I achieve those?

Thanks

[Evgeni_Popov]

For 1/, you must create a button to be able to click on it and show the menu. For the menu itself, you can show/hide the buttons by accessing the children of the plane:

https://www.babylonjs-playground.com/#HTYAW1#2

For 2/ yes, you can set position of the panel with panel.position. If you don’t want the camera being moved before we clicked the menu button, you should not attach the control of the camera until the button is clicked:

https://www.babylonjs-playground.com/#HTYAW1#3

For 3/, 3D GUI is less powerful than 2D GUI in terms of customizations because everything is in 3D, so you don’t have a 2D context where you can use 2D drawing functions. I think you will have to create a plane to put behind your buttons and apply a texture on it to achieve the desired effect. For the close button, I guess a Button3D should do it.

[Dshah_H]

1. Thank you

2. what if I want to move all panel while camera is moving? I tried with below but menu becomes invisible when I do this https://www.babylonjs-playground.com/#HTYAW1#4panelStartX = 90;
   panelStartZ = 2250;
   panelStartY = 150;scene.onBeforeRenderObservable.add(() => {
   panel.position.x = camera.position.x + panelStartX;
   panel.position.y = camera.position.y + panelStartY;
   panel.position.z = camera.position.z + panelStartZ;
   });

EDIT, I am able to get closer by using, but still menu change its position
https://www.babylonjs-playground.com/#HTYAW1#5

   panel.position.x =  camera.position.x - panelStartX;
    panel.position.y = camera.position.y - panelStartY;
    panel.position.z = camera.position.z - panelStartZ;

3. “For the close button, I guess a Button3D should do it.”
   I am creating 2 rows panel.rows = 2;, should I create 3 rows and split? if so, how can I make only 1 button at top in 1 row.

[Evgeni_Popov]

For 2/, this is working for me: https://www.babylonjs-playground.com/#HTYAW1#6

For 3/, you should create a Button3D and position it in the right location with the position property. Maybe you can parent it to the plane if you want it to follow the moving/rotation of the plane.

[Dshah_H]

Thank you