In Depth Introduction

Creating a UI

You can create a new UI like this:

gui = new VRUI.VRUI(layout, guiWidth, guiHeight);

As you can see, it needs a default layout. You can add any VRUI.Element object. For instance:

let layout = new VRUI.layout.VerticalLayout();

It also needs an initial width and height, that you have to specify according to your world, for instance:

let guiWidth = 0.2; // In Three.js units.
let guiHeight = 0.26; // In Three.js units.

It's nice, but for now, you have just an empty layout, so you should not see anything. You can for instance add a unicolor background, by creating your layout like that:

let layout = new VRUI.layout.VerticalLayout({
    background: 0xFF0000
});

Or, if you want to edit the style a posteriori, you can do it like this:

layout.set({
    background: 0xFFFFFF
});

You can now add small buttons to your layout:

let button = new VRUI.view.ImageButton(texture, {
    height: 0.5,
    width: 0.5,
    background: 0x00FFFF
})
layout.add(button);

At this time, if you try this code, it should not work. Actually, the whole layout is not computed every time, but only when you ask it. In order to recompute the bounds and to recompute the layout, you have to call the refresh() method:

gui.refresh();

And the second thing, we have to add our GUI to the Three.js scene:

gui.addToScene(scene); // With `scene`, a THREE.Scene object, or any THREE.Object3D inside a scene.

Below is the complete source code:

    let guiWidth = 0.2; // In Three.js units.
    let guiHeight = 0.26; // In Three.js units.

    let layout = new VRUI.layout.VerticalLayout({
        background: 0xFFFFFF
    });
    let button1 = new VRUI.view.ImageButton(texture, {
        height: 0.5,
        width: 0.5,
        background: 0x00FFFF
   })
   layout.add(button1, button2);

   gui = new VRUI.VRUI(layout, guiWidth, guiHeight);
   gui.addToScene(scene); // Adds the gui to the THREE.Scene 

   gui.refresh();

Test