My current objective is to create an animation for a 3D model that I have imported as a .gltf file. The model contains only one animation.
After carefully following the steps outlined in the documentation:
And exploring various examples on the internet, it seems that most of them follow a similar structure with only minor modifications.
Here is a snippet of my code (the commented lines represent failed attempts):
let loader = new THREE.GLTFLoader();
loader.load('scene.gltf', function ( gltf ) {
GLTF = gltf;
let xMesh = gltf.scene.children[0];
scene.add(xMesh);
animation = new THREE.AnimationMixer(xMesh);
animation.clipAction(gltf.animations[0]).setDuration(8).play();
}, undefined, function ( error ) {
console.error( error );
} );
function render() {
requestAnimationFrame(render);
var delta = new THREE.Clock().getDelta();
if (animation != null) {
animation.update(delta);
};
renderer.render(scene, camera);
}
Despite following the official documentation, I am facing an issue where the 3D model is displayed but not animated. There are no errors or warnings in the devTools.
It's frustrating to encounter this problem even after following the official guidelines. I must be overlooking something...