时间戳

首页 > 解决方案 > How to get multiple objects to play the same animation THREE.js

javascript - 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);


    });

}

标签： javascriptthree.js

解决方案

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.

推荐阅读