I'm attempting to display a animated model(.glb) in three.js but I am encountering the error mentioned above. When I place the LoadAnimatedModel function within the main method, it functions correctly. However, if I utilize it in a separate class, it no longer works. The LoadStaticModel function works fine, but the animated function does not. Any insights into what may be causing this issue? Thank you in advance!
Below is the provided code snippet:
class CharacterControllerInput{
mixers = [];
scene;
constructor(scene){
this.scene = scene;
this.LoadAnimatedModel();
}
LoadAnimatedModel(scene){
this.scene = scene;
const loader = new GLTFLoader();
loader.load( 'http://127.0.0.1:3000/docs/BeterWerktDit.glb', function ( gltf ) {
gltf.scene.traverse( function ( object ) {
if ( object.isMesh ) object.castShadow = true;
} );
const model1 = SkeletonUtils.clone( gltf.scene );
const mixer1 = new THREE.AnimationMixer( model1 );
mixer1.clipAction( gltf.animations[ 0 ] ).play();
this.scene.add( model1);
this.mixers.push( mixer1);
render();
} );
}
Here is an abbreviated version of the class where I instantiate the Class.
class Scene{
constructor(){
this.main();
}
main(){
const canvas = document.querySelector('#c');
const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
const scene = new THREE.Scene();
this.character = new CharacterControllerInput(scene);
render();
function render(){
const width = window.innerWidth;
const height = window.innerHeight;
camera.aspect = window.innerWidth/window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(width, height, false);
const delta = clock.getDelta();
for (const mixer of mixers) mixer.update(delta);
renderer.render(scene, camera);
requestAnimationFrame(render)
}
requestAnimationFrame(render);
}
};
let _APP = null;
window.addEventListener('DOMContentLoaded', () => {
_APP = new Scene();
});