I'm attempting to create a loop of animated butterflies, but I'm encountering an issue where only the first or last butterfly actually animates. I suspect this is due to the need to clone the gltf.scene, but there's a known bug with cloning animated gltfs.
Any assistance would be greatly appreciated.
let mixer = [];
const butt_loader = new THREE.GLTFLoader();
for(var i=0;i<40;i++){
butt_loader.load('butterfly_rigged.glb', function (gltf) {
var butt_scale = 1;
var model = gltf.scene;
model.position.z = -3 - Math.random()*7;
model.position.x = 6*Math.random();
model.position.y = 6*Math.random();
model.scale.x = butt_scale*Math.random();
model.scale.y = butt_scale*Math.random();
model.scale.z = butt_scale*Math.random();
model.rotation.y = -Math.PI/4;
model.rotation.z = 0.1;
model.rotation.x = Math.PI/4;
butt_scene.add(model.clone());
mixer.push(new THREE.AnimationMixer(model));
gltf.animations.forEach((clip) => {
mixer[mixer.length-1].clipAction(clip).play();
});
});
}
var butt_clock = new THREE.Clock();
function render_butt(){
for(var i=0;i<mixer.length;i++){
if(mixer[i]!=null) mixer[i].update(butt_clock.getDelta());
}
requestAnimationFrame( render_butt );
butt_ren.clear();
butt_ren.render( butt_scene, butt_camera );
}
render_butt();