Added animation test

main.js

@@ -6,6 +6,7 @@ import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 
 
 const scene = new THREE.Scene();
+const clock = new THREE.Clock(); // Required to calculate delta time
 
 const sizes = {
     width: window.innerWidth,
@@ -14,6 +15,7 @@ const sizes = {
 
 
 let loadData = null;
+let mixer; 
 
 fetch('model-index.json')
   .then(response => response.json())
@@ -126,6 +128,20 @@ function loadModel(modelPath) {
     loader.load(modelPath, (glb) => {
         currentModel = glb.scene;
         scene.add(glb.scene);
+
+        // Check if the file contains animations
+        if (glb.animations && glb.animations.length > 0) {
+            // Create the AnimationMixer and bind it to the model
+            mixer = new THREE.AnimationMixer(currentModel);
+            
+            // Get the first animation clip and create a playable action
+            const animationClip = glb.animations[0];
+            const action = mixer.clipAction(animationClip);
+            
+            // Play the animation
+            action.play();
+        }
+
         loaderContainer.style.display = 'none'; // Hide Loading Throbber
         setGuiEnabled(gui, true);
     });
@@ -220,12 +236,18 @@ scene.environment = env_texture;
 //UPDATE PER FRAME
 renderer.setAnimationLoop( animate );
 
-function animate( time ) {
+function animate() {
-
+    requestAnimationFrame(animate);
-  controls.update();
+    const delta = clock.getDelta(); 
-  renderer.render( scene, camera );
+    if (mixer) {
+        mixer.update(delta); 
+    }
+    controls.update();
+    renderer.render( scene, camera );
 }
 
+animate();
+
 //Toggle GUI
 function setGuiEnabled(guiInstance, isEnabled) {
     guiInstance.controllersRecursive().forEach(controller => {

model-index.json

@@ -124,5 +124,11 @@
     "variants": {
       "default": "models/---------- Frog Zoo.glb"
     }
+  },
+    {
+    "name": "Anim Test",
+    "variants": {
+      "default": "models/---------- anim test.glb"
+    }
   }
 ]