Textured Cube in Babylon.js from Dropbox

by Ivan Enzhaev

HTML

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/babylonjs/2.5.0/babylon.js"></script>

CSS

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

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

JavaScript

var canvas = document.getElementById("renderCanvas");
var engine = new BABYLON.Engine(canvas);
var scene = new BABYLON.Scene(engine);

var createScene = function()
{
    BABYLON.SceneLoader.Load("https://dl.dropboxusercontent.com/s/c1ncwxb83i2nplx/", "TexturedCube.babylon", engine, function (scene)
    {
        // Wait for textures and shaders to be ready

        scene.clearColor = new BABYLON.Color3(0.7, 0.7, 0.6);

        //var light = new BABYLON.DirectionalLight("DirLight", new BABYLON.Vector3(-1, -1, 1), scene);

        var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, new BABYLON.Vector3(0, 0, -10), scene);
        scene.activeCamera = camera;
        camera.attachControl(canvas, true);
        camera.setTarget(BABYLON.Vector3.Zero());
        camera.setPosition(new BABYLON.Vector3(0, 0, -5));
        
        var cube = scene.meshes[0];

        var cubeMaterial = new BABYLON.StandardMaterial("cubeMat", scene);
        cubeMaterial.diffuseTexture = new BABYLON.Texture("https://dl.dropboxusercontent.com/s/iyvyn2qs8vrzzz2/TexturesCube.png", scene);
        cubeMaterial.bumpTexture = new BABYLON.Texture("https://dl.dropboxusercontent.com/s/abywt5s0dpy9vrk/TexturedCube_norm.png", scene);
        cube.material = cubeMaterial;

        
        function renderLoop()
        {
            scene.render();
        }
        engine.runRenderLoop(renderLoop);
        
        window.addEventListener("resize", function()
        {
            engine.resize();
        });
    }, function (progress)
    {
        // ToDo: give progress feedback to user
    });
    return scene;
};

var scene = createScene();