Update index.html

index.html

@@ -29,22 +29,33 @@
                 // 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);
+                // Create an array to hold the spheres
+                var spheres = [];
 
-                // 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;
+                // 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);
+                    sphere.position = new BABYLON.Vector3(Math.random() * 4 - 2, Math.random() * 4 - 2, Math.random() * 4 - 2);
+                    spheres.push(sphere);
 
-                // 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);
+                    // Follow the mouse with the spheres
+                    var ray = scene.createPickingRay(event.clientX, event.clientY, BABYLON.Matrix.Identity(), camera);
+                    var pickInfo = scene.pickWithRay(ray, function (mesh) { return mesh == sphere; });
+                    if (pickInfo.hit) {
+                        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);
+                    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;
             }