Best way to create a menu

Questions
1

I use this cool dropdown control (top left) that’s supported in Babylon 4.

http://turingtester.gitlab.io/babylonjs-intro/demo/

This guy uses html elements in babylon 3.

https://ssatguru.github.io/VishvaWorld-LogCabin/

Which is the preferred approach? Is the HTML way deprecated?

2

Is the HTML way deprecated?

If possible I would avoid HTML elements especially if you plan on using your application in VR mode. VR only broadcasts the canvas.

Regarding approach to building one…

I take the approach of building an Array of objects that I can feed into my menus so that they are easy to update (such as being created from a server AJAX call).

var menuItems = Array(
{
id: "menuitem0",
label: "Turn Lights On",
action: function(){
// code to turn the lights on or whatever you want to do when user selects this item
}
    },
{
id: "menuitem1",
label: "Turn Lights Off",
action: function(){
// code to turn the lights off 
}
    }
    );

// then feed it into a function
function createMenu(data){
// 1. create a transform node to hold all menu item meshes
// 2. looping through the items and placing a mesh inside main transform node
// depending on how you intend to use the menu (click, ray, dropdown, slider) the rest will be up to you but really all you need is a container (the node) and your menu items (fed by a data Array to keep things clean). 
}
1 Like
3

I think this is very cool. Is there any project case that can be provided? I plan to apply it to the current project
http://turingtester.gitlab.io/babylonjs-intro/demo/