Text, GUI & Controls in 3D webXR application

Questions
1

The following program works. But I want to add text and controls in a 3D VR environment. The explanation in the “HOW TO use the Babylon 3D GUI” is not quite understandable for me. It suggests that I need to add ??? to use the 3D GUI extension, but does not say how I do that. What do I need to add to the page to use BABYLON.GUI.GUI3DManager(scene), textblock(), etc? (The examples in the playground give the code only for the CREATESCENE function, but it seems as if I need to bring in something in the head . The github readme.md did not help me either. ) Thanks!

<head>
    <meta  charset=utf-8"/>
    <title>Babylon Template</title>

    <style>
        html, body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>

    <script src="https://preview.babylonjs.com/babylon.js"></script>
    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
    <script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>

<canvas id="renderCanvas" touch-action="none"></canvas> //touch-action="none" for best results from PEP

<script>
    var canvas = document.getElementById("renderCanvas"); // Get the canvas element 
    var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine

/******* Add the create scene function ******/

    var createScene = function () {
       var scene = new BABYLON.Scene(engine);

       var camera = new BABYLON.ArcRotateCamera("Camera", -Math.PI/2, Math.PI / 3, 25, BABYLON.Vector3.Zero(), scene);

/*** VR ***/
var vrHelper = scene.createDefaultVRExperience({createDeviceOrientationCamera:false});
camera.attachControl(canvas, true);

/*** LIGHT ***/
var light = new BABYLON.HemisphericLight(“light1”, new BABYLON.Vector3(0, 1, 0), scene);
light.intensity = 0.7;

/*** BOX ***/
var box = BABYLON.Mesh.CreateBox(“box”, 10, scene);

/***
NOW ADD TEXT ???

  NOW ADD 3D GUI:   var manager = new BABYLON.GUI.GUI3DManager(scene);

***/

/*** RETURN SCENE & END ***/
return scene;

     };

/******* End of the create scene function ******/

    var scene = createScene(); //Call the createScene function

    // Register a render loop to repeatedly render the scene
    engine.runRenderLoop(function () { 
            scene.render();
    });

    // Watch for browser/canvas resize events
    window.addEventListener("resize", function () { 
            engine.resize();
    });
</script>
2

Hello!

just add that to your header:

<script src="https://preview.babylonjs.com/gui/babylon.gui.min.js"></script>