Hello everyone, I am new to this. I managed to load an .fbx character along with additional animation clips from Mixamo. My goal is to have the animations switch when a key ("Q") is clicked. Currently, the character loads and plays the first animation clip but the subsequent animation changes are not playing. You can check out where I'm currently at by visiting this link.
Below is the important piece of code...
let Actions = [];
let action;
let animPaths = [ "./models/T-Pose.fbx","./models/Walking.fbx","./models/Running.fbx","./models/Idle.fbx" , "./models/Dancing.fbx"];
let pathIDs = ["t-pose","walking", "running", "idle", "dancing"];
let moe;
let mixer;
const loader = new FBXLoader();
loader.load("./models/T-Pose.fbx", function(object){
object.scale.set(0.1, 0.1, 0.1);
/* object.traverse(function(child){
if(child.isMesh){
child.material = material;
}
})*/
moe = object;
moe.position.y = -70;
mixer = new THREE.AnimationMixer(object);
action = mixer.clipAction(object.animations[0]);
Actions.push(action);
//action.play();
scene.add(object);
loadNextAnimation(loader);
});
function loadNextAnimation(loader){
for(let i=1;i<animPaths.length;i++){
loader.load(animPaths[i], (object) =>{
mixer = new THREE.AnimationMixer(moe);
Actions.push(mixer.clipAction(object.animations[0]));
scene.add(object);
action = Actions[i];
mixer.stopAllAction();
action.play();
})
}
}
let i = 0;
let fwd = true;
document.onkeydown = function(event) {
// 81 = q
if(event.keyCode == 81){
if(i < 1) fwd = true;
if(i > Actions.length) fwd = false;
if(fwd){
i++;
}else{
i--;
}
action = Actions[i];
mixer.stopAllAction();
//mixer.reset();
action.play();
console.log("i = " + i);
console.log(animPaths[i]);
document.getElementById("testtext").value = "currentClip = "+pathIDs[i];
animate();
}
};I would appreciate it if someone could point out where I might be making mistakes. Thank you.