After following the example provided on threejs.org for loading FBX files, I managed to successfully load my model using the function below:
this.obj = null;
var loader = new THREE.FBXLoader();
var objs = []
function load_init( object ) {
mixer = new THREE.AnimationMixer( object );
console.log("Adding to objs...");
objs.push(object);
console.log(objs[0]);
object.traverse( function ( child ) {
if ( child.isMesh ) {
const oldMat = child.material;
var newMat = new THREE.MeshBasicMaterial();
}
} );
object.position.z -= 200;
object.position.y -= 250;
var action = mixer.clipAction( object.animations[ 0 ] );
action.play();
scene.add( object );
}
var true_load = load_init.bind(this);
console.log("Printing objects...");
loader.load( 'Anims/Capoeira.fbx', true_load);
console.log(objs);// It seems to have contents
console.log(objs[0]);// This prints out as undefined
The object is added successfully and I can observe the animation playing. However, my issue arises when trying to access the loaded object within the scene in order to make changes to its properties like material shading and color. By running console.log(scene.children), all children are printed which include a light, ground, grid helper, and the loaded object. But despite this, when checking the length it only shows 3 objects instead of 4. Attempts to directly access the loaded object through the children array or by ID/name result in it being undefined. I even tried modifying the function to return the loaded object or set a variable named loaded_object, but with no success.