Estoy tratando de reproducir una animación esquelética incrustada básica en un modelo .glb usando Three.js
La solución que estoy usando proviene de este foro: https://discourse.threejs.org/t/easiest-way-to-play-skeletal-animation-from-gltf/7792
Estoy usando el código muy básico. Se encuentra la animación (puedo iniciar sesión en la consola). Pero la animación no se reproduce.
let file, scale, backgroundColor; window.onload = loader; function loader (){ file = "Fox.glb"; scale = 1; backgroundColor = 0x000000; init(); } function init(){ //RENDERER myCanvas = document.getElementById('myCanvas'); renderer = new THREE.WebGLRenderer({ canvas: myCanvas, antialias: true }); renderer.setClearColor(backgroundColor); renderer.setPixelRatio(window.devicePixelRatio); renderer.setSize(window.innerWidth, window.innerHeight); //CAMERA camera = new THREE.PerspectiveCamera(35, window.innerWidth / window.innerHeight, 0.1, 1000 ); //SCENE scene = new THREE.Scene(); let controls = new THREE.OrbitControls(camera, renderer.domElement); camera.position.set( 0, 20, 100 ); controls.update(); //LIGHTS let light = new THREE.AmbientLight(0xffffff, 0.5); scene.add(light); let light2 = new THREE.PointLight(0xffffff, 0.5); scene.add(light2); let loader = new THREE.GLTFLoader(); loader.load(file, handle_load); let mesh; function handle_load(gltf) { mesh = gltf.scene; //ANIMATION let mixer = new THREE.AnimationMixer( gltf.scene ); let action = mixer.clipAction( gltf.animations[ 0 ] ); action.play(); //PREPARING DISPLAY mesh.children[0].material = new THREE.MeshLambertMaterial(); mesh.children[0].scale.set(1,1,1,) scene.add( mesh ); mesh.position.z = -10; } render(); function render() { renderer.render(scene, camera); requestAnimationFrame(render); }¿Qué me estoy perdiendo?
No está actualizando el mezclador de animación en su bucle de animación. Escribe tu función render() así:
function render() { renderer.render(scene, camera); const delta = clock.getDelta(); if (mixer) mixer.update(delta); requestAnimationFrame(render); } La variable clock es una instancia de THREE.Clock . Debe definirlo (y su mezclador de animación) en el mismo ámbito que su renderizador, cámara y escena.