I'm attempting to create a three.js block animation that reverts back to its original position once the animation is complete, utilizing tween.js.
Is it possible to achieve this using only one tween with tween.js?
I have managed to make it work with the following code snippet:
var initialPosition = {x: -200, y: 150, width: 1, height: 1, depth: 1, rotx: -0.5, roty: 0.7, rotz: 0.9};
var finalPosition = {x: 200, y: -100, width: 0.4, height: 3, depth: 8, rotx: 0.3, roty: -0.4, rotz: -0.6};
var resetPosition = {x: -200, y: 150, width: 1, height: 1, depth: 1, rotx: -0.5, roty: 0.7, rotz: 0.9};
var meshObject = new THREE.Mesh(
new THREE.CubeGeometry(190, 45, 30),
new THREE.MeshBasicMaterial({color: 0x444444}),
0
);
meshObject.position.set(initialPosition.x, initialPosition.y, 0);
meshObject.rotation.set(initialPosition.rotx, initialPosition.roty, initialPosition.rotz);
scene.add(meshObject);
var firstTween = new TWEEN.Tween(initialPosition).to(finalPosition, 2000);
firstTween.onUpdate(function() {
meshObject.position.set(initialPosition.x, initialPosition.y, 0);
meshObject.scale.set(initialPosition.width, initialPosition.height, initialPosition.depth);
meshObject.rotation.set(initialPosition.rotx, initialPosition.roty, initialPosition.rotz);
});
firstTween.easing(TWEEN.Easing.Quadratic.Out);
firstTween.onComplete(function() {secondTween.start();});
var secondTween = new TWEEN.Tween(finalPosition).to(resetPosition, 2000);
secondTween.onUpdate(function() {
meshObject.position.set(finalPosition.x, finalPosition.y, 0);
meshObject.scale.set(finalPosition.width, finalPosition.height, finalPosition.depth);
meshObject.rotation.set(finalPosition.rotx, finalPosition.roty, finalPosition.rotz);
});
secondTween.easing(TWEEN.Easing.Quadratic.In);
firstTween.start();
The tweens are updated within my animation function:
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
meshObject.__dirtyPosition = true;
meshObject.__dirtyRotation = true;
TWEEN.update();
}
animate();
Although the current setup works as expected, it feels inefficient and cumbersome to manage.
Any assistance or guidance would be greatly appreciated.