I am attempting to implement basic embedded skeletal animation in a .glb model using Three.js
The workaround I found is from a discussion on this forum:
I have written the simplest code possible. The animation is being located (can be logged into the console). However, the animation does not 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 could be causing the issue?