Blank beginner from first setup

Questions
1

The following code I wrote following this tutorial but when I run it in my browser it is coming up blank. The source js appears to be up to date. What am I missing?

BabylonJSDemo #canvas { width:100%; height:100%; } 
</head>
<body>
    <canvas id="canvas"></canvas></canvas>
    <script>
        window.addEventListener("DOMContentLoaded", function() {
            var canvas = document.getElementById("canvas");
            var engine = new BABYLON.Engine(canvas,true);
            var createScene = function () {
                var scene = new BABYLON.Scene(engine);
                
                scene.clearColor = new BABYLON.Color3.White();
                var camera = new Babylon.FreeCamera("camera1", new BABYLON.
                Vector3(0,0,-10), scene);
                camera.setTarget(Babylon.Vector3.Zero());
                 var box = BABYLON.Mesh.CreateBox("Box",4.0, scene);
                    
                    return scene;
            }

            var scene = createScene();
            engiine.runRenderLoop(function(){
                scene.render();
            });
        });
    </script>
</body>
2

You should check the console.
You have three issues.
1)
var camera = new Babylon.FreeCamera("camera1", new BABYLON.Vector3(0,0,-10), scene);
Replace Babylon with BABYLON, as Babylon is undefined.
2)
Do the same thing with
camera.setTarget(Babylon.Vector3.Zero());
3)
engiine.runRenderLoop… is undefined as well. It should be engine.

These issues are easy to catch if you check the developer console.

4 Likes