CODEWITHSUNDEEP
javascriptthree.js
Ecburt
Ecburt

Reputation: 125

How to get multiple objects to play the same animation THREE.js

I am adding a group of birds to a scene but only one of them is playing the animation that I loaded I've read in the documentation that you can use THREE.AnimationObjectGroup but I cant get it to work. I load the objects and animation in this loop.


for (var numberOfBirds = 0; numberOfBirds < 20; numberOfBirds++) {
    loader.load("./assets/bird.gltf", function (gltf) {

        //Loading in and positioning model
        var bird = gltf.scene;
        bird.scale.set(10, 10, 10);

        bird.position.set(Math.random() * 500, Math.random() * 500, Math.random() * 500);
        var flock = new THREE.AnimationObjectGroup;
        flock.add(bird);
        console.log(flock);

        //Playing Animation
        mixer = new THREE.AnimationMixer(flock);
        console.log(gltf.animations);
        mixer.clipAction(gltf.animations[0]).play();

        scene.add(bird);


    });

}

Upvotes: 1

Views: 1842

Answers (2)

hayden_g
hayden_g

Reputation: 47

What @mumbu22 said and in addition make sure you're updating your mixer in your update/render loop

if (this.mixer) {
      this.deltaSeconds = timestamp - this.start;
      this.mixer.update( this.deltaSeconds );
      this.start = timestamp; 
}

Upvotes: 0

mumbu22
mumbu22

Reputation: 66

Still new to THREEjs but maybe pull out your 'var flock = new THREE.AnimationObjectGroup;' from your for loop and call your '//play animation' block outside of the for loop.

create group --> add 20 birds to group (for loop) --> play animation for group.

Not sure if you need scene.add(bird) either. I think you can just scene.add(flock) after the loop.

Upvotes: 5

Related Questions