3D GUI

Babylon.js provides a robust 3D GUI system that allows you to create interactive user interfaces directly within a 3D environment. This system is designed to work seamlessly with 3D scenes, providing a variety of controls and layout options, much like traditional 2D GUI frameworks, but with the added flexibility to work in a 3D space.

To begin working with 3D GUI in Babylon.js, the first step is to instantiate a GUI3DManager. This manager is the central component responsible for managing and connecting all the 3D UI controls within a scene.

In Reactylon, you can handle the creation and management of the GUI3DManager in a more streamlined and declarative way. When you define a scene in Reactylon, simply pass isGui3DManager set to true and the engine automatically instantiates the GUI3DManager and takes care of the setup and interactions for you.

<Scene isGui3DManager />

Stack Panel 3D

StackPanel3D is a UI control in Babylon.js that arranges its child elements in a stack, similar to a StackPanel in 2D UI systems. However, StackPanel3D works in 3D space, meaning the elements inside it are arranged along the Z-axis, and you can rotate and scale the entire stack in 3D.

In the following example, you can see a basic usage of StackPanel3D. Click on “CHANGE ORIENTATION” 3D button to change the layout’s orientation.

const [isVerticalPanel, setIsVerticalPanel] = useState(false);
 
// ...
 
<stackPanel3D margin={0.2} isVertical={isVerticalPanel}>
    <button3D onPointerClick={() => setIsVerticalPanel(isVerticalPanel => !isVerticalPanel)}>
        <textBlock fontSize={35} text={`CHANGE \nORIENTATION`} color='white' textWrapping />
    </button3D>
    {new Array(4).fill(null).map((_, index) => (
        <button3D>
            <textBlock fontSize={35} text={`BUTTON ${index}`} color='white' />
        </button3D>
    ))}
</stackPanel3D>

Sphere Panel

SpherePanel is a 3D UI control in Babylon.js designed to arrange its child elements along the surface of a sphere. This control essentially wraps the UI components around a spherical shape, distributing them evenly or in a customizable pattern across the sphere’s surface.

<spherePanel margin={0.2}>
    {new Array(60).fill(null).map((_, index) => {
        const name = `btn-${index}`;
        return <holographicButton name={name} key={name} text={name} onPointerClick={() => console.log(`clicked on: ${name}`)} />;
    })}
</spherePanel>

Cylinder Panel

CylinderPanel is similar to SpherePanel, but it arranges UI elements along the surface of a cylinder instead of a sphere. This is particularly useful when you need a cylindrical layout for your 3D UI elements, such as a circular scroll or a rotating 3D menu.

<spherePanel margin={0.2} rows={3}>
    {new Array(60).fill(null).map((_, index) => {
        const name = `btn-${index}`;
        return <holographicButton name={name} key={name} text={name} onPointerClick={() => console.log(`clicked on: ${name}`)} />;
    })}
</spherePanel>

Scatter Panel

ScatterPanel is a more flexible and random distribution of UI elements in 3D space. It scatters its child elements across the scene, and you can control the extent of the scattering, random positioning, and orientations.

<scatterPanel margin={0.2}>
    {new Array(60).fill(null).map((_, index) => {
        const name = `btn-${index}`;
        return <holographicButton name={name} key={name} text={name} onPointerClick={() => console.log(`clicked on: ${name}`)} />;
    })}
</scatterPanel>

Mesh Button 3D

MeshButton3D is a type of UI control that allows for the creation of buttons that are based on 3D meshes. This is ideal when you want to create 3D interactive buttons that can be customized with any 3D mesh (like a cube, sphere, or any custom shape) and still retain button-like behavior (clickable, hoverable, etc.). These buttons can respond to mouse or touch events just like standard 2D buttons, but they can be manipulated in 3D space.

const [mesh, setMesh] = useState<Mesh>();
 
useEffect(() => {
    (async () => {
        const result = await SceneLoader.ImportMeshAsync('', 'https://david.blob.core.windows.net/babylonjs/MRTK/', 'pushButton.glb');
        setMesh(result.meshes[0] as Mesh);
    })();
}, []);
 
// ...
 
return mesh ? <meshButton3D rotationY={Tools.ToRadians(180)} mesh={mesh} name='mesh' onPointerClick={() => console.log('clicked on mesh button')} /> : null;

Learn More

For other controls, properties and customizations, please refer to Babylon.js documentation: https://doc.babylonjs.com/features/featuresDeepDive/gui/gui3D/.

2D GUI Audio