awacke1/HTML5-BabylonJS-Javascript-3DAnimation

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 an array to hold the spheres33                var spheres = [];34 35                // Load the texture and bump map36                var texture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png", scene);37                var bumpMap = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor_n.jpg", scene);38 39                // Create a fountain of spheres that follow the mouse40                canvas.addEventListener('mousemove', function (event) {41                    // Create a new sphere42                    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: Math.random() * 2 + 0.5, segments: 16}, scene);43                    sphere.position = new BABYLON.Vector3(Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2);44                    sphere.material = new BABYLON.StandardMaterial("texture", scene);45                    sphere.material.diffuseTexture = texture;46                    sphere.material.bumpTexture = bumpMap;47                    spheres.push(sphere);48 49                    // Follow the mouse with the spheres50                    var ray = scene.createPickingRay(event.clientX, event.clientY, BABYLON.Matrix.Identity(), camera);51                    var pickInfo = scene.pickWithRay(ray, function (mesh) { return mesh == sphere; });52                    if (pickInfo.hit) {53                        sphere.position.copyFrom(pickInfo.pickedPoint);54                    }55 56                    // Animate the texture of the spheres57                    var textureAnimation = new BABYLON.Animation("textureAnimation", "material.diffuseTexture.uOffset", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);58                    var keys = [];59                    keys.push({frame: 0, value: 0});60                    keys.push({frame: 100, value: 1});61                    textureAnimation.setKeys(keys);62                    sphere.material.diffuseTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;63                    sphere.material.diffuseTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;64                    sphere.material.diffuseTexture.uScale = 10;65                    sphere.material.diffuseTexture.vScale = 10;66                    sphere.animations.push(textureAnimation);67                    scene.beginAnimation(sphere, 0, 100, true);68 69                    // Animate the spheres70                    var animation = new BABYLON.Animation("myAnimation", "position.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);71var keys = [];72keys.push({frame: 0, value: sphere.position.y});73keys.push({frame: 50, value: sphere.position.y + 2});74keys.push({frame: 100, value: sphere.position.y});75animation.setKeys(keys);76sphere.animations.push(animation);77scene.beginAnimation(sphere, 0, 100, true);78});79 80              81            return scene;82        }83 84        var scene = createScene();85 86        engine.runRenderLoop(function () {87            scene.render();88        });89 90        window.addEventListener('resize', function () {91            engine.resize();92        });93    });94      95</script>96</body>97</html>98