THREE.js在循环中加载相同的动画GLB仅播放最后加载的模型

时间:2019-12-28 09:42:50

标签: javascript three.js

我正试图循环加载一大批动画蝴蝶,出于某种原因,它们中只有一个(实际上是第一个或最后一个都在播放),我想这是因为我需要克隆gltf.scene,但是有一个克隆动画gltfs的已知错误。

任何帮助表示赞赏。

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

1 个答案:

答案 0 :(得分:0)

此部分:

    for(var i=0;i<mixer.length;i++){
        if(mixer[i]!=null) mixer[i].update(butt_clock.getDelta());
    }

最好替换为:

    var delta = butt_clock.getDelta();
    for(var i=0;i<mixer.length;i++){
        if(mixer[i]!=null) mixer[i].update(delta);
    }

.getDelta()自上次调用以来获得增量,因此在循环中调用它时,除第一次迭代外,所有增量均为0。当您将其置于循环之外时,您将获得一次并将相同(非零)值传递给所有混合器。