| <!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); |
| |
| |
| var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene); |
| |
| |
| var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene); |
| |
| |
| var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene); |
| |
| |
| var material = new BABYLON.StandardMaterial("texture", scene); |
| material.diffuseTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/grass.jpg", scene); |
| sphere.material = material; |
| |
| |
| 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> |
|
|
