javascriptthree.jstweenjs

ThreeJs/TweenJS add delay between tween with a for loop


currently working on a bin packing problem using Three.JS and Tween.JS I'm actually struggling using animation. I have a loop where I place a bunch of Plane Geometry stored in a variable in a canvas using the TWEEN object. What I would like to do is to play successively my animation and not at the same time. I already used the setTimeout solution with no success. What is the solution for ThreeJS/TweenJs to wait between each animation loop?

Bin packing placement code :

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

My function to animate the set position :

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

Solution

  • TweenJS has a .chain() command you can use to trigger subsequent tweens.

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