如何让多个对象播放同一个动画 THREE.js

Ecb*_*urt 1 javascript three.js

我正在将一群鸟添加到场景中,但只有其中一只正在播放我加载的动画我在文档中读到您可以使用 THREE.AnimationObjectGroup 但我无法让它工作。我在此循环中加载对象和动画。


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


    });

}
Run Code Online (Sandbox Code Playgroud)

小智 5

对 THREEjs 来说还是个新手,但也许可以拿出你的 'varflock = new THREE.AnimationObjectGroup;' 从 for 循环中调用“//播放动画”块。

创建组 --> 添加 20 只鸟到组中(for 循环) --> 为组播放动画。

不确定您是否需要 scene.add(bird) 。我认为你可以在循环后调用 scene.add(flock) 。