Update index.html

index.html

@@ -32,11 +32,18 @@
                 // Create an array to hold the spheres
                 var spheres = [];
 
+                // Load the texture and bump map
+                var texture = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor.png", scene);
+                var bumpMap = new BABYLON.Texture("https://www.babylonjs-playground.com/textures/floor_n.jpg", scene);
+
                 // Create a fountain of spheres that follow the mouse
                 canvas.addEventListener('mousemove', function (event) {
                     // Create a new sphere
-                    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: Math.random() * 2 + 0.5}, scene);
+                    var sphere = BABYLON.MeshBuilder.CreateSphere("sphere", {diameter: Math.random() * 2 + 0.5, segments: 16}, scene);
                     sphere.position = new BABYLON.Vector3(Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2);
+                    sphere.material = new BABYLON.StandardMaterial("texture", scene);
+                    sphere.material.diffuseTexture = texture;
+                    sphere.material.bumpTexture = bumpMap;
                     spheres.push(sphere);
 
                     // Follow the mouse with the spheres
@@ -46,30 +53,45 @@
                         sphere.position.copyFrom(pickInfo.pickedPoint);
                     }
 
-                    // Animate the spheres
-                    var animation = new BABYLON.Animation("myAnimation", "position.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
+                    // Animate the texture of the spheres
+                    var textureAnimation = new BABYLON.Animation("textureAnimation", "material.diffuseTexture.uOffset", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
                     var keys = [];
-                    keys.push({frame: 0, value: sphere.position.y});
-                    keys.push({frame: 50, value: sphere.position.y + 2});
-                    keys.push({frame: 100, value: sphere.position.y});
-                    animation.setKeys(keys);
-                    sphere.animations.push(animation);
+                    keys.push({frame: 0, value: 0});
+                    keys.push({frame: 100, value: 1});
+                    textureAnimation.setKeys(keys);
+                    sphere.material.diffuseTexture.wrapU = BABYLON.Texture.WRAP_ADDRESSMODE;
+                    sphere.material.diffuseTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
+                    sphere.material.diffuseTexture.uScale = 10;
+                    sphere.material.diffuseTexture.vScale = 10;
+                    sphere.animations.push(textureAnimation);
                     scene.beginAnimation(sphere, 0, 100, true);
-                });
 
-                return scene;
-            }
+                    // Animate the spheres
+                    var animation = new BABYLON.Animation("myAnimation", "position.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
+var keys = [];
+keys.push({frame: 0, value: sphere.position.y});
+keys.push({frame: 50, value: sphere.position.y + 2});
+keys.push({frame: 100, value: sphere.position.y});
+animation.setKeys(keys);
+sphere.animations.push(animation);
+scene.beginAnimation(sphere, 0, 100, true);
+});
+
+              
+            return scene;
+        }
 
-            var scene = createScene();
+        var scene = createScene();
 
-            engine.runRenderLoop(function () {
-                scene.render();
-            });
+        engine.runRenderLoop(function () {
+            scene.render();
+        });
 
-            window.addEventListener('resize', function () {
-                engine.resize();
-            });
+        window.addEventListener('resize', function () {
+            engine.resize();
         });
-    </script>
+    });
+      
+</script>
 </body>
 </html>