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