Error of JS babylon code. I need some help please

Bugs
1

Hello and thank you for being a member of the community!
If you want to report a bug, please make sure to share a repro on the forum:

Hi guys, I am brand new to JS and Babylon Library. I am having some trouble with running my JS code, for some reason it isn’t working. I am using VS code and I am opening my Html page using a live server which I downloaded from the extensions. What I am trying to do is, I am trying to create a simple 3D rectangle. But when I run my JS code, the rectangle won’t appear. I am getting an error, Uncaught TypeError: Cannot read properties of undefined (reading ‘Rectangle’) at index.html:26:36. I will attach my code below, if someone can correct my code and send it back to me. That would be awesome.

Babylon.js Example window.addEventListener('DOMContentLoaded', function () { // Babylon.js code goes here var canvas = document.getElementById("renderCanvas"); var engine = new BABYLON.Engine(canvas, true); 
    // Create a Babylon.js scene
    var scene = new BABYLON.Scene(engine);

    // Create a camera
    var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
    camera.attachControl(canvas, true);

    // Create a light
    var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

    // Create the GUI element (Rectangle)
    var rect = new BABYLON.GUI.Rectangle("Rectangle");
    rect.width = "100px";
    rect.height = "50px";
    rect.cornerRadius = 20;
    rect.color = "white";
    rect.thickness = 4;
    rect.background = "black";

    // Add the GUI element to the scene
    scene.addControl(rect);

    // Render the scene
    engine.runRenderLoop(function () {
        scene.render();
    });

    // Handle window resizing
    window.addEventListener('resize', function () {
        engine.resize();
    });
});
</script>
2

Maybe you just need to load the GUI? It’s separate from the main Babylon.js library.

1 Like
3

Hi, welcome to the community.

I am trying to create a simple 3D rectangle.

Unless you are trying to make a UI, you don’t need the GUI to do this. You can create a Plane or Ground instead. See MeshBuilder for lots of examples of creating shapes.

Here is a simple scene with a plane.

        <script>
            window.addEventListener("DOMContentLoaded", async function () {

                // Create a Babylon.js scene
                var canvas = document.getElementById("renderCanvas");
                var engine = new BABYLON.Engine(canvas, true);
                var scene = new BABYLON.Scene(engine);

                // Create a camera
                var camera = new BABYLON.ArcRotateCamera("Camera", Math.PI / 2, Math.PI / 2, 2, BABYLON.Vector3.Zero(), scene);
                camera.attachControl(canvas, true);

                // Create a light
                var light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);

                // Create the GUI element (Rectangle)
                var rect = new BABYLON.GUI.Rectangle("Rectangle");
                rect.width = "100px";
                rect.height = "50px";
                rect.cornerRadius = 20;
                rect.color = "white";
                rect.thickness = 4;
                rect.background = "black";

                // Add the GUI element to the scene
                // This is invalid code: you can't add GUI to the scene directly. You need to add it to an AdvancedDynamicTexture
                // scene.addControl(rect);

                // Draw a plane
                var plane = BABYLON.MeshBuilder.CreatePlane("ground", {
                    width: 1,
                    height: 1
                }, scene);
                // rotate the plane so it faces the camera
                plane.rotation.x = Math.PI / 2;
                plane.position.y = -0.5;


                // Render the scene
                engine.runRenderLoop(function () {

                    scene.render();
                });

                // Handle window resizing
                window.addEventListener('resize', function () {
                    engine.resize();
                });
            });

        </script>

If you do want to use GUI, then you have an issue with how you are trying to use the GUI. You can’t add GUI controls directly to the scene. These can be added to an Advanced Dynamic Texture. ADT can be added as an overlay or added the surface of a mesh.

3 Likes