MDN Games: Babylon.js demo - shapes

by Milan Gladiš

HTML

<script src="https://end3r.github.io/MDN-Games-3D/Babylon.js/js/babylon.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/babylonjs.loaders.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<canvas id="render-canvas"></canvas>

CSS

html,body,canvas { margin: 0; padding: 0; width: 100%; height: 100%; font-size: 0; }

JavaScript

var canvas = document.getElementById("render-canvas");
    var engine = new BABYLON.Engine(canvas);
    window.addEventListener("resize", function(){engine.resize();});
    var scene = new BABYLON.Scene(engine);
    scene.clearColor = new BABYLON.Color3(0.8, 0.8, 0.8);
    
    var camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 10, -10), scene);
    camera.rotation.x = 0.8;
    /* camera.attachControl(canvas, true); */

		// Light
    var light = new BABYLON.DirectionalLight("DirectionalLight", new BABYLON.Vector3(-0.5, -2, 0.5), scene);
    light.intensity = 0.3;
    
    // Ground
    var ground = BABYLON.Mesh.CreateGround('ground1', 100, 100, 2, scene);
    var groundMaterial = new BABYLON.StandardMaterial("material", scene);
    groundMaterial.specularColor = new BABYLON.Color3(0.5, 0.5, 0.5);
    ground.material = groundMaterial;
    
    // BO
    var box = BABYLON.Mesh.CreateBox("box", 2, scene);
    box.rotation.x = -0;
		box.position.y = 1;
    var boxMaterial = new BABYLON.StandardMaterial("material", scene);
    /* boxMaterial.emissiveColor = new BABYLON.Color3(0, 0.58, 0.86); */
    boxMaterial.emissiveColor = new BABYLON.Color3(0.3, 0.3, 0.3);
    box.material = boxMaterial;

		// Shadow
    var shadowGenerator = new BABYLON.ShadowGenerator(2048, light);
    shadowGenerator.getShadowMap().renderList.push(box);
    shadowGenerator.useBlurVarianceShadowMap = false;
    shadowGenerator.bias = 0.000001;
    shadowGenerator.useBlurExponentialShadowMap = true;
		shadowGenerator.blurBoxOffset = 20.0;
		/* shadowGenerator1.getShadowMap().refreshRate = 0; */
    shadowGenerator.usePoissonSampling = true;
    ground.receiveShadows = true;

    var t = 0;
    var renderLoop = function () {
        scene.render();
        t -= 0.01;
        box.rotation.y = t*-0.15;
    };
    engine.runRenderLoop(renderLoop);
    
    
    box.actionManager = new BABYLON.ActionManager(scene);
    box.actionManager.registerAction(new...