Загрузка данных

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Runner</title>

    <style>
        body,
        #render-canvas,
        #user-interface {
            margin: 0;
            width: 100%;
            height: 100vh;
        }
    </style>
    <script src='https://cdn.babylonjs.com/babylon.js'></script>
    <script src='https://cdn.babylonjs.com/cannon.js'></script>
</head>

<body>
    <canvas id="render-canvas"></canvas>

    <script>
        //Создание мира (холост, движок, сцена и тп.)
        let canvas = document.getElementById("render-canvas");
        let engine = new BABYLON.Engine(canvas, true);
        let scene = new BABYLON.Scene(engine);
        scene.clearColor = new BABYLON.Color3(0.8, 0.8, 0.8);
        scene.enablePhysics();

        let camera = new BABYLON.FreeCamera("camera", new BABYLON.Vector3(0, 5, -10), scene);
        camera.attachControl(canvas, true);
        camera.setTarget(BABYLON.Vector3.Zero());

        let light = new BABYLON.PointLight("light", new BABYLON.Vector3(10, 10, 0), scene);
        light.intensity = 0.2;
        let shadowGenerator = new BABYLON.ShadowGenerator(1024, light);

        //игровые объекты
        let platform = new BABYLON.MeshBuilder.CreateBox("platform", {
            width: 6,
            height: 0.2,
            depth: 6,
        }, scene);

        let platformMaterial = new BABYLON.StandardMaterial("platform_material", scene);
        platformMaterial.emissiveTexture = new BABYLON.Texture('assets/platform.png');
        platform.material = platformMaterial;
        platform.physicsImpostor = new BABYLON.PhysicsImpostor(
            platform, BABYLON.PhysicsImpostor.BoxImpostor,
            {
                mass: 0 //набор физ свойств
            },
            scene
        );
        platform.receiveShadows = true;

        let ball = new BABYLON.MeshBuilder.CreateSphere("ball", {}, scene);
        ball.position = new BABYLON.Vector3(0, 3, 0);

        let ballMaterial = new BABYLON.StandardMaterial("ball_material", scene);
        ballMaterial.emissiveTexture = new BABYLON.Texture('assets/ball.png');

        ball.material = ballMaterial;

        ball.physicsImpostor = new BABYLON.PhysicsImpostor(
            ball, BABYLON.PhysicsImpostor.SphereImpostor,
            {
                mass: 1 //набор физ свойств
            },
            scene
        );

        shadowGenerator.getShadowMap().renderList.push(ball);

        //ОБРАБОТЧИКИ событий
        window.addEventListener('resize', function () {
            engine.resize();
        });

        window.addEventListener('touchstart', (event) => {
            ball.physicsImpostor.applyImpulse(
                new BABYLON.Vector3(0, 1, 2), //толкаем объект в направлении
                ball.getAbsolutePosition() //точка импульса = текущая позиция мяча
            );
        });

        window.addEventListener('touchend', () => {
            ball.physicsImpostor.setLinearVelocity(
                new BABYLON.Vector3(0, 0, 0)
            );
            ball.physicsImpostor.setAngularVelocity(
                new BABYLON.Vector3(0, 0, 0)
            );
        });


        //рендер сцены в конце
        engine.runRenderLoop(function () {
            scene.render();
        });
    </script>
</body>

</html>