ThreeJs/TweenJS 使用 for 循环在补间之间添加延迟

Question

目前正在使用 Three.JS 和 Tween.JS 解决装箱问题我实际上正在努力使用动画。我有一个循环，我使用 TWEEN 对象将一堆平面几何体存储在 canvas 的变量中。我想做的是依次播放我的动画，而不是同时播放。我已经使用 setTimeout 解决方案但没有成功。 ThreeJS/TweenJs在每个动画循环之间等待的解决方案是什么？

装箱放置代码：

var GeometryArray = Array();

for(let i=0; i < elementNumber; i++){
                let elementHeight = GeometryArray[i].geometry.parameters.height;
                let elementWidth = GeometryArray[i].geometry.parameters.width;
                calc = 5 - cursorX.position.x
                calc2 = 5 - cursorY.position.y
                if(elementWidth <= (5 - cursorX.position.x)){
                    console.log("1")
                    MoveObject(GeometryArray[i], cursorX.position.x + elementWidth/2, cursorY.position.y +elementHeight/2)
                    cursorX.position.x += elementWidth;
                    if(cursorMax.position.y < GeometryArray[i].position.y + elementHeight/2){
                        cursorMax.position.y = GeometryArray[i].position.y + elementHeight/2;
                    }
                }
                else if(elementHeight <= (5 - cursorMax.position.y)){
                    console.log("2")
                    cursorY.position.y = cursorMax.position.y;
                    cursorX.position.x = -5; 
                    MoveObject(GeometryArray[i], cursorX.position.x + elementWidth/2, cursorY.position.y +elementHeight/2)
                }
                else{
                    actualIndex = i
                    //gestion du placement des élément dans les interstices
                    for(let j=0;j<i;j++){
                        console.log("ENTERED")
                        //récupération et calcul de la différence de hauteur entre les element J et J+1 déjà posés
                        hauteurJ = GeometryArray[j].position.y + GeometryArray[j].geometry.parameters.height/2
                        hauteurJ1 = GeometryArray[j+1].position.y + GeometryArray[j+1].geometry.parameters.height/2
                        positionDroitElementJ = GeometryArray[j].position.x + GeometryArray[j].geometry.parameters.width
                        calcHauteur = hauteurJ - hauteurJ1;
                        calcLargeur = 5 - positionDroitElementJ;
                        //Si il y a assez d'espace entre les 2 élement pour contenir un autre element et qu'il y a assez de largeur, on place le curseur et l'élement
                        if(calcHauteur >= elementHeight && calcLargeur >= elementWidth){
                            console.log("calc" + calcLargeur + " width = " + elementWidth)
                            //On place le curseur sur le coin haut gauche de l'élement J+1
                            cursorY.position.y = hauteurJ1
                            cursorX.position.x = GeometryArray[j+1].position.y - GeometryArray[j+1].geometry.parameters.height/2
                            MoveObject(GeometryArray[i], cursorX.position.x + elementWidth/2, cursorY.position.y +elementHeight/2)
                        }
                        else{
                            //l'élément est impossible à placer donc on supprime
                            GeometryArray[i].geometry.dispose();
                        }
                    }
                }
            }

我的动画设置位置的函数：

function MoveObject(mesh, positionX, positionY){
                    var position = { x : mesh.position.x, y : mesh.position.y };
                    var target = { x : positionX, y : positionY };
                    var tween = new TWEEN.Tween(position).to(target, 1000);
                    tween.onUpdate(function(){
                        mesh.position.x = position.x;
                        mesh.position.y = position.y;
                    });
                    tween.start();
            }

Answer 1

TweenJS 有一个 .chain() 命令可以用来触发后续补间。

https://github.com/tweenjs/tween.js/blob/master/docs/user_guide.md#chain

ThreeJs/TweenJS 使用 for 循环在补间之间添加延迟

ThreeJs/TweenJS add delay between tween with a for loop

javascript

three.js

tweenjs