I am currently making a threejs animation. It was a little bit complicated, since I had to change the pivots of the objects everytime another animation is going to happen and rearange every object to it's right position (probably some of you will know this issue, who has some animation experience).
I achieved finally the right animation, but the code is a little clunky. I put everything in the animation() function and in result I have something like this:
JavaScript:
function animate() {
//Animation 1
if (frontPivot1.rotation.x<=Math.PI && backPivot1.rotation.x>=-Math.PI) {
frontPivot1.add(mesh1);
frontPivot1.add(mesh2);
backPivot1.add(mesh5);
backPivot1.add(mesh6);
mesh1.position.z = -5;
mesh2.position.z = -5;
mesh5.position.z = 5;
mesh6.position.z = 5;
frontPivot1.rotation.x += Math.PI / 90;
backPivot1.rotation.x += -Math.PI / 90;
}
//Animation 2
if((frontPivot1.rotation.x>=Math.PI && backPivot1.rotation.x<=-Math.PI) && (centerPivotCCW2.rotation.z <= 0.5*Math.PI && centerPivotCW2.rotation.z >= -0.5*Math.PI)) {
//CCW
centerPivotCCW2.add(mesh1);
centerPivotCCW2.add(mesh4);
centerPivotCCW2.add(mesh6);
centerPivotCCW2.add(mesh7);
mesh1.position.z = 15;
mesh1.rotation.x = Math.PI;
mesh4.position.y=5;
mesh6.position.z = -15;
mesh6.rotation.x = Math.PI;
mesh7.position.y=5;
//CW
centerPivotCW2.add(mesh2);
centerPivotCW2.add(mesh3);
centerPivotCW2.add(mesh5);
centerPivotCW2.add(mesh8);
mesh2.position.z = 15;
mesh2.rotation.x = Math.PI;
mesh3.position.y=5;
mesh5.position.z = -15;
mesh5.rotation.x = Math.PI;
mesh8.position.y=5;
centerPivotCCW2.rotation.z += Math.PI / 90;
centerPivotCW2.rotation.z += -Math.PI / 90;
camera.position.y += -0.224;
}
//Animation 3
if(centerPivotCCW2.rotation.z >= 0.5*Math.PI && centerPivotCW2.rotation.z <= -0.5*Math.PI && (centerPivotCCW3.rotation.x >= -0.5*Math.PI && centerPivotCW3.rotation.x <= 0.5*Math.PI)){
//CW
centerPivotCW3.add(mesh1);
centerPivotCW3.add(mesh2);
centerPivotCW3.add(mesh3);
centerPivotCW3.add(mesh4);
mesh1.rotation.z=-0.5*Math.PI;
mesh2.rotation.z=0.5*Math.PI;
mesh3.rotation.z=-0.5*Math.PI;
mesh4.rotation.z=0.5*Math.PI;
//CCW
centerPivotCCW3.add(mesh5);
centerPivotCCW3.add(mesh6);
centerPivotCCW3.add(mesh7);
centerPivotCCW3.add(mesh8);
mesh5.rotation.z=-0.5*Math.PI;
mesh6.rotation.z=0.5*Math.PI;
mesh7.rotation.z=-0.5*Math.PI;
mesh8.rotation.z=0.5*Math.PI;
centerPivotCW3.rotation.x += Math.PI / 90;
centerPivotCCW3.rotation.x += -Math.PI / 90;
camera.position.y += -0.448;
}
//Animation 4
if(centerPivotCCW3.rotation.x <= -0.5*Math.PI && centerPivotCW3.rotation.x >= 0.5*Math.PI && (leftPivot4.rotation.z <= Math.PI && rightPivot4.rotation.z >= -Math.PI)){
//Left
leftPivot4.add(mesh4);
leftPivot4.add(mesh7);
mesh4.position.x=5;
mesh7.position.x=5;
mesh4.rotation.x=0.5*Math.PI;
mesh7.rotation.x=1.5*Math.PI;
//Rightt
rightPivot4.add(mesh3);
rightPivot4.add(mesh8);
mesh3.position.x=-5;
mesh8.position.x=-5;
mesh3.rotation.x=0.5*Math.PI;
mesh8.rotation.x=1.5*Math.PI;
leftPivot4.rotation.z+= Math.PI / 90;
rightPivot4.rotation.z+= -Math.PI / 90;
}
//Animation 5
if(leftPivot4.rotation.z >= Math.PI && rightPivot4.rotation.z <= -Math.PI && (centerPivotCW5.rotation.x <= 0.5*Math.PI && centerPivotCCW5.rotation.x >= -0.5*Math.PI)){
//CW
centerPivotCW5.add(mesh1);
centerPivotCW5.add(mesh2);
centerPivotCW5.add(mesh3);
centerPivotCW5.add(mesh4);
mesh1.position.z=5;
mesh2.position.z=5;
mesh3.position.x=15;
mesh4.position.x=-15;
mesh1.rotation.x=1.5*Math.PI;
mesh2.rotation.x=1.5*Math.PI;
mesh3.rotation.y=Math.PI;
mesh4.rotation.y=Math.PI;
//CCW
centerPivotCCW5.add(mesh5);
centerPivotCCW5.add(mesh6);
centerPivotCCW5.add(mesh7);
centerPivotCCW5.add(mesh8);
mesh5.position.z=-5;
mesh6.position.z=-5;
mesh7.position.x=-15;
mesh8.position.x=15;
mesh5.rotation.x=0.5*Math.PI;
mesh6.rotation.x=0.5*Math.PI;
mesh7.rotation.y=2*Math.PI;
mesh8.rotation.y=2*Math.PI;
centerPivotCW5.rotation.x += Math.PI / 90;
centerPivotCCW5.rotation.x += -Math.PI / 90;
camera.position.y += -0.224;
}
//Animation 6
if(centerPivotCW5.rotation.x >= 0.5*Math.PI && centerPivotCCW5.rotation.x <= -0.5*Math.PI && (centerPivotCW6.rotation.z <= 0.5*Math.PI && centerPivotCCW6.rotation.z >= -0.5*Math.PI)){
//CW
centerPivotCW6.add(mesh1);
centerPivotCW6.add(mesh4);
centerPivotCW6.add(mesh6);
centerPivotCW6.add(mesh7);
mesh1.rotation.x=2*Math.PI;
mesh4.rotation.x=Math.PI;
mesh6.rotation.x=2*Math.PI;
mesh7.rotation.x=Math.PI;
//CCW
centerPivotCCW6.add(mesh2);
centerPivotCCW6.add(mesh3);
centerPivotCCW6.add(mesh5);
centerPivotCCW6.add(mesh8);
mesh2.rotation.x=2*Math.PI;
mesh3.rotation.x=Math.PI;
mesh5.rotation.x=2*Math.PI;
mesh8.rotation.x=Math.PI;
centerPivotCCW6.rotation.z += -Math.PI / 90;
centerPivotCW6.rotation.z += Math.PI / 90;
camera.position.y += -0.448;
}
render();
aniframe = requestAnimationFrame( animate );
controls.update();
}
First of all, I can't really loop this animation, since every object is wrong oriented by getting them to their initial position (guess I need to rearange them manually). And secondly, I don't know how I can pause within the animation and resume it...or even loop it backwards.
Any helpful tips how to manage animations in threejs?