diff --git a/main.js b/main.js index ee78aa6..571e07c 100644 --- a/main.js +++ b/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 ) { - - controls.update(); - renderer.render( scene, camera ); +function animate() { + requestAnimationFrame(animate); + const delta = clock.getDelta(); + if (mixer) { + mixer.update(delta); + } + controls.update(); + renderer.render( scene, camera ); } +animate(); + //Toggle GUI function setGuiEnabled(guiInstance, isEnabled) { guiInstance.controllersRecursive().forEach(controller => { diff --git a/model-index.json b/model-index.json index b36b5cd..06dafe1 100644 --- a/model-index.json +++ b/model-index.json @@ -124,5 +124,11 @@ "variants": { "default": "models/---------- Frog Zoo.glb" } + }, + { + "name": "Anim Test", + "variants": { + "default": "models/---------- anim test.glb" + } } ] diff --git a/models/---------- anim test.glb b/models/---------- anim test.glb new file mode 100644 index 0000000..ce440c9 Binary files /dev/null and b/models/---------- anim test.glb differ diff --git a/models/animated/animation test.glb b/models/animated/animation test.glb new file mode 100644 index 0000000..503b65e Binary files /dev/null and b/models/animated/animation test.glb differ