Graphic User Interfaces


Graphical User Interface

There are a number of options for adding a GUI to Babylon.js.

  1. Babylon.GUI, this allows you to place buttons and labels within in 3D space as well as a 2D front of screen GUI.
  2. CastorGUI a Babylon.js extension which overlays the scene
  3. Dat.GUI, an external interface
  4. HTML

Babylon.GUI

When you want a GUI that works in VR or within the 3D space BABYLON.GUI the only option. It is integrated within the playground. For your own projects it has to be loaded as well as Babylon.js

CastorGUI

An alternative 2D GUI is the extension CastorGUI with documentation. It has to be loaded both for the playground and for your own projects.

It can be found on github

Dat.GUI

The external dat.GUI is integrated within the playground. For your own projects it has to be loaded as well as Babylon.js

HTML

Since Babylon.js is in JavaScript it is possible to use HTML and CSS to overlay the Babylon.js scene

Further Reading

BABYLON.GUI
CastorGUI

External

Basic Usage of dat.GUI