awacke1/HTML5-BabylonJS-Javascript-3DAnimation
4
1<!DOCTYPE html>2<html>3<head>4 <meta charset="utf-8" />5 <title>Babylon.js Game Example</title>6 <script src="https://cdn.babylonjs.com/babylon.js"></script>7 <script src="https://cdn.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>8 <style>9 canvas {10 width: 100%;11 height: 100%;12 touch-action: none;13 }14 </style>15</head>16<body>17 <canvas id="renderCanvas"></canvas>18 <script>19 window.addEventListener('DOMContentLoaded', function () {20 var canvas = document.getElementById('renderCanvas');21 var engine = new BABYLON.Engine(canvas, true);22 23 var createScene = function () {24 var scene = new BABYLON.Scene(engine);25 26 // Create a camera27 var camera = new BABYLON.ArcRotateCamera("Camera", 0, 0, 10, BABYLON.Vector3.Zero(), scene);28 29 // Create a light30 var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);31 32 // Create a sphere33 var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: 2}, scene);34 35 // Add some texture to the sphere36 var material = new BABYLON.StandardMaterial("texture", scene);37 material.diffuseTexture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/grass.jpg", scene);38 sphere.material = material;39 40 // Animate the sphere41 var animation = new BABYLON.Animation("myAnimation", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);42 var keys = [];43 keys.push({frame: 0, value: 0});44 keys.push({frame: 100, value: 10});45 animation.setKeys(keys);46 sphere.animations.push(animation);47 scene.beginAnimation(sphere, 0, 100, true);48 49 return scene;50 }51 52 var scene = createScene();53 54 engine.runRenderLoop(function () {55 scene.render();56 });57 58 window.addEventListener('resize', function () {59 engine.resize();60 });61 });62 </script>63</body>64</html>65