Update index.html

index.html

@@ -39,28 +39,56 @@
                     sphere.material = new BABYLON.StandardMaterial("texture", scene);
                     sphere.material.diffuseTexture = texture;
                     sphere.material.bumpTexture = bumpMap;
-                    const textureAnimation = new BABYLON.Animation("textureAnimation", "material.diffuseTexture.uOffset", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE, true);
+                    const textureAnimation = new BABYLON.Animation("textureAnimation", "material.diffuseTexture.uOffset", 60, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
                     textureAnimation.setKeys([{ frame: 0, value: 0 }, { frame: 100, value: 1 }]);
                     sphere.material.diffuseTexture.wrapU = sphere.material.diffuseTexture.wrapV = BABYLON.Texture.WRAP_ADDRESSMODE;
                     sphere.material.diffuseTexture.uScale = sphere.material.diffuseTexture.vScale = 10;
                     sphere.animations.push(textureAnimation);
                     scene.beginAnimation(sphere, 0, 100, true);
-                    const animation = new BABYLON.Animation("myAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE, true);
+                    const animation = new BABYLON.Animation("myAnimation", "position", 30, BABYLON.Animation.ANIMATIONTYPE_VECTOR3, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
                     animation.setKeys([{ frame: 0, value: position.clone() }, { frame: 100, value: position.addInPlace(direction.scale(length)).clone() }]);
                     sphere.animations.push(animation);
                     scene.beginAnimation(sphere, 0, 100, true);
                 } else if (char === "+") {
-                    direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), -angle), direction);
+                    direction.rotateByQuaternionToref(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), -angle), direction);
 } else if (char === "-") {
 direction.rotateByQuaternionToRef(BABYLON.Quaternion.RotationAxis(BABYLON.Vector3.Up(), angle), direction);
 }
 }
-return scene;
-};
-const scene = createScene();
-engine.runRenderLoop(() => scene.render());
-window.addEventListener('resize', () => engine.resize());
-</script>
 
+        // Add the 3D animation
+        const animate = () => {
+            const sphere = BABYLON.MeshBuilder.CreateSphere("animationSphere", { diameter: 1 }, scene);
+            sphere.position = new BABYLON.Vector3(0, 0, 0);
+            sphere.material = new BABYLON.StandardMaterial("animationMaterial", scene);
+            sphere.material.diffuseColor = new BABYLON.Color3(1, 0, 0);
+
+            const animation = new BABYLON.Animation(
+                "sphereAnimation",
+                "position.y",
+                30,
+                BABYLON.Animation.ANIMATIONTYPE_FLOAT,
+                BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE
+            );
+            const keys = [];
+            keys.push({ frame: 0, value: 0 });
+            keys.push({ frame: 50, value: 2 });
+            keys.push({ frame: 100, value: 0 });
+            animation.setKeys(keys);
+            sphere.animations.push(animation);
+
+            scene.beginAnimation(sphere, 0, 100, true);
+        };
+        animate();
+
+        return scene;
+    };
+    const scene = createScene();
+    engine.runRenderLoop(() => scene.render());
+    window.addEventListener('resize', () => engine.resize());
+</script>
 </body>
 </html>
+
+
+