I'm trying to play basic embedded skeletal animation in .glb model using Three.js
The solution i'm using comes from this forum : https://discourse.threejs.org/t/easiest-way-to-play-skeletal-animation-from-gltf/7792
I'm using the very basic code. The animation is found (i can log it into console). But the animation doesn't play.
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);
}
What am i missing?
You are not updating the animation mixer in your animation loop. Write your render() function like so:
function render() {
renderer.render(scene, camera);
const delta = clock.getDelta();
if (mixer) mixer.update(delta);
requestAnimationFrame(render);
}
The clock variable is an instance of THREE.Clock. You have to define it (and your animation mixer) in the same scope like your renderer, camera and scene.