<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Babylon.js Game Example</title> <script src="https://cdn.babylonjs.com/babylon.js"></script> <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script> <style> canvas { width: 100%; height: 100%; touch-action: none; } </style> </head> <body> <canvas id="renderCanvas"></canvas> <script> window.addEventListener('DOMContentLoaded', function () { var canvas = document.getElementById('renderCanvas'); var engine = new BABYLON.Engine(canvas, true); var createScene = function () { var scene = new BABYLON.Scene(engine); // Create a camera var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene); // Create a light var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); // Create a sphere var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene); // Add some texture to the sphere var material = new BABYLON.StandardMaterial("texture", scene); material.diffuseTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/grass.jpg", scene); sphere.material = material; // Animate the sphere var animation = new BABYLON.Animation("myAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); var keys = []; keys.push({frame: 0, value: 0}); keys.push({frame: 100, value: 10}); animation.setKeys(keys); sphere.animations.push(animation); scene.beginAnimation(sphere, 0, 100, true); return scene; } var scene = createScene(); engine.runRenderLoop(function () { scene.render(); }); window.addEventListener('resize', function () { engine.resize(); }); }); </script> </body> </html>