<canvas id="renderCanvas"></canvas>

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

        #renderCanvas {
            width   : 100%;
            height  : 100%;
            touch-action: none;
        }

window.addEventListener('DOMContentLoaded', function(){
            // get the canvas DOM element
            var canvas = document.getElementById('renderCanvas');

            // load the 3D engine
            var engine = new BABYLON.Engine(canvas, true);

            // createScene function that creates and return the scene
            var createScene = function () {

            var scene = new BABYLON.Scene(engine);
                    
                    var sun = new BABYLON.PointLight("Omni0", new BABYLON.Vector3(60, 100, 10), scene);

                    // Need a free camera for collisions
                    var camera = new BABYLON.FreeCamera("FreeCamera", new BABYLON.Vector3(5, 7, 0), scene);
                    camera.attachControl(canvas, true);

                    // Ground
                    var ground = BABYLON.Mesh.CreateGroundFromHeightMap("ground", "https://www.babylonjs-playground.com/textures/heightMap.png", 200, 200, 100, 0, 10, scene, false);
                    var groundMaterial = new BABYLON.StandardMaterial("ground", scene);
                    groundMaterial.diffuseTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/grass.png", scene);
                    groundMaterial.diffuseTexture.uScale = 6;
                    groundMaterial.diffuseTexture.vScale = 6;
                    groundMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
                    ground.position.y = -2.05;
                    ground.material = groundMaterial;

                    // Skybox
                    var skybox = BABYLON.Mesh.CreateBox("skyBox", 1000.0, scene);
                        var skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
                        skyboxMaterial.backFaceCulling = false;
                        skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("https://www.babylonjs-playground.com/textures/TropicalSunnyDay", scene);
                        skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
                        skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
                        skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
                        skyboxMaterial.disableLighting = true;
                        skybox.material = skyboxMaterial;        
                    
                
                //Simple crate
                var box = new BABYLON.MeshBuilder.CreateBox("crate", {
                    width: 100, 
                    height: 50,
                    depth: 100,
                    sideOrientation: 1
                }, scene);
                
                box.material = new BABYLON.StandardMaterial("Mat", scene);
                box.material.alpha = 0;
                box.position = new BABYLON.Vector3(0, 1, 0);

                //Set gravity for the scene (G force like, on Y-axis)
                scene.gravity = new BABYLON.Vector3(0, -0.9, 0);

                // Enable Collisions
                scene.collisionsEnabled = true;

                //Then apply collisions and gravity to the active camera
                camera.checkCollisions = true;
                camera.applyGravity = true;

                //Set the ellipsoid around the camera (e.g. your player's size)
                camera.ellipsoid = new BABYLON.Vector3(1, 1, 1);

                //finally, say which mesh will be collisionable
                ground.checkCollisions = true;
                box.checkCollisions = true;


                var light = new BABYLON.DirectionalLight("dir01", new BABYLON.Vector3(0, -1, -0.3), scene);


                ground.onReady = function () {
                        ground.optimize(100);

                        // Shadows
                        var shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

                        // Trees
                        BABYLON.SceneLoader.ImportMesh("", "//www.babylonjs.com/assets/Tree/", "tree.babylon", scene, function (newMeshes) {
                            newMeshes[0].material.opacityTexture = null;
                            newMeshes[0].material.backFaceCulling = false;
                            newMeshes[0].isVisible = false;
                            newMeshes[0].position.y = ground.getHeightAtCoordinates(0, 0); // Getting height from ground object

                            shadowGenerator.getShadowMap().renderList.push(newMeshes[0]);
                            var range = 100;
                            var count = 100;
                            for (var index = 0; index < count; index++) {
                                var newInstance = newMeshes[0].createInstance("i" + index);
                                var x = range / 2 - Math.random() * range;
                                var z = range / 2 - Math.random() * range;

                                var y = ground.getHeightAtCoordinates(x, z); // Getting height from ground object

                                newInstance.position = new BABYLON.Vector3(x, y, z);

                                newInstance.rotate(BABYLON.Axis.Y, Math.random() * Math.PI * 2, BABYLON.Space.WORLD);

                                var scale = 0.5 + Math.random() * 2;
                                newInstance.scaling.addInPlace(new BABYLON.Vector3(scale, scale, scale));

                                shadowGenerator.getShadowMap().renderList.push(newInstance);
                            }
                            shadowGenerator.getShadowMap().refreshRate = 0; // We need to compute it just once
                            shadowGenerator.usePoissonSampling = true;

                            // Collisions
                            camera.checkCollisions = true;
                            camera.applyGravity = true;
                        });
                    }
                // Leave this function
                return scene;

            };

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

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

            // the canvas/window resize event handler
            window.addEventListener('resize', function(){
                engine.resize();
            });
        });