Adding a dropdown to babylon scene

Questions
1

I am trying to create something similar to campus Albano example which uses babylonjs (screenshot provided below). I have a babylon scene and I have added a panel that shows up in the top right corner as follows

const panel = new StackPanel(“Panel”);
panel.width = 0.25;
panel.height = 0.5;
panel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
panel.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
panel.background = “white”;
panel.isVisible = true;
advancedTexture.addControl(panel);

I am able to add TextBlocks and Buttons inside this panel to show the information I want. I would like to add a select dropdown to this panel so that the user can select an option and save changes.

It doesn’t look like there is a Select dropdown control provided by “@babylonjs/gui”. I tried using HTML Select component

// create option using DOM
const newOption = document.createElement(‘option’);
const optionText = document.createTextNode(‘Option Text’);
// set option text
newOption.appendChild(optionText);
// and option value
newOption.setAttribute(‘value’, ‘Option Value’);
const select = document.querySelector(‘select’);
select!.appendChild(newOption);

if (select !== null){
panel.addControl(select );
}
but I get the following error

TS2345: Argument of type ‘HTMLSelectElement’ is not assignable to parameter of type ‘Nullable’.
Type ‘HTMLSelectElement’ is missing the following properties from type ‘Control’: _alpha, _alphaSet, _zIndex, _host, and 211 more.

Any suggestions?

Campus Albano example:

image
image1920×843 142 KB

2

I think here:

You have to use (without BABYLON):

BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT
BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP
3

The panel is showing up along with the text fields and buttons that I have added inside it. The issue is not with the panel, I want to add a dropdown menu to this panel.

Making the change you suggested gives me the following error
Property ‘GUI’ does not exist on type ‘typeof BABYLON’.ts(2339)
where as this
panel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
panel.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
shows the panel

4

Oh, I see. Maybe this PG can inspire you, to solve it:

2 Likes
5

I use react typescript and I couldn’t use it right away. Is there an example of implementing this as a function component using react-hooks instead of class?

Thanks

6

Thanks a lot for taking the time to show others that, even if not implemented (yet) as a component, it is indeed 100% possible to create a dropdown from the BJS GUI. With a bit more effort, it’s actually even possible to animate it.

7

image
image1920×843 140 KB

I am also trying to add an accordion. I am using ‘react-accessible-accordion’ npm package and I have the accordion and the babylon scene side by side in a div.

Does babylon have an accordion component? if not is there a way I can add accordion from ‘react-accessible-accordion’ to the scene as we can see from the campus albano example screenshot

8

No, but you could create a custom one.

Sry, no faen clue; I don’t do react. May be @Takemura or @carolhmj knows about this.
And since you marked your topic as ‘solved’ you would get faster replies if you create a new one.
Else, you should call people directly.

9

You can use react components ALONG with a Babylon scene, but not INSIDE a scene, as React uses DOM Elements and Babylon uses canvas. @brianzinn’s amazing react-babylonjs provides easy integration with React: brianzinn/react-babylonjs: React for Babylon 3D engine (github.com)

2 Likes
10

You can put DOM to appear inside in your scene with the Html component:
GUI - Html Text ⋅ Storybook (brianzinn.github.io)

ie: this div will follow around the sphere in 3d space and is interactable like a DOM element (you can highlight the text, for example):

<sphere name='sphere1' diameter={2} segments={16} position={new Vector3(0, 1, 0)}>
  <Html name="html" center occlude={false} >
     {<div style={{ backgroundColor: 'white', borderRadius: '5px', border: '3px solid red', padding: '8px' }}>Text</div>}
  </Html>
</sphere>

if you are doing XR then note that it won’t be brought into scene - you can fallback to GUI for that. This is how you build a GUI in React (note does not use DOM CSS):
GUI - 2D UI ⋅ Storybook (brianzinn.github.io)

2 Likes