I have Univesity project in ThreeJS, where tween animation is mandatory. My question is,how do I modify my code so that the spacecraft does continuous circular motion? In my current code, the model moves in the shape of a cube.
// Start
new TWEEN.Tween(spacecraftGroup.position)
.to({x: initialPosition.x, z: initialPosition.z - (-350)}, animationDuration)
.easing(TWEEN.Easing.Linear.None)
.onComplete(() => {
// 1st turn
new TWEEN.Tween(spacecraftGroup.rotation)
.to({
x: spacecraftGroup.rotation.x,
y: spacecraftGroup.rotation.y - Math.PI / 2,
z: spacecraftGroup.rotation.z
}, animationDuration / 2)
.easing(TWEEN.Easing.Linear.None)
.onComplete(() => {
// Move forward
new TWEEN.Tween(spacecraftGroup.position)
.to({x: initialPosition.x - 360}, animationDuration / 2)
.easing(TWEEN.Easing.Linear.None)
.delay(turnDelay)
.onComplete(() => {
// 2nd turn
new TWEEN.Tween(spacecraftGroup.rotation)
.to({
x: spacecraftGroup.rotation.x,
y: spacecraftGroup.rotation.y - Math.PI / 2,
z: spacecraftGroup.rotation.z
}, animationDuration / 2)
.easing(TWEEN.Easing.Linear.None)
.onComplete(() => {
//Move forward 2nd
new TWEEN.Tween(spacecraftGroup.position)
.to({x: initialPosition.x - 360, z: initialPosition.z - 350}, animationDuration)
.easing(TWEEN.Easing.Linear.None)
.onComplete(() => {
// 3rd turn
new TWEEN.Tween(spacecraftGroup.rotation)
.to({
x: spacecraftGroup.rotation.x,
y: spacecraftGroup.rotation.y - Math.PI / 2,
z: spacecraftGroup.rotation.z
}, animationDuration / 2)
.easing(TWEEN.Easing.Linear.None)
.onComplete(() => {
//Forward
new TWEEN.Tween(spacecraftGroup.position)
.to({x: initialPosition.x, z: initialPosition.z - 260}, animationDuration)
.easing(TWEEN.Easing.Linear.None)
.onComplete(() => {
// 4th turn
new TWEEN.Tween(spacecraftGroup.rotation)
.to({
x: spacecraftGroup.rotation.x,
y: spacecraftGroup.rotation.y - Math.PI / 2,
z: spacecraftGroup.rotation.z
}, animationDuration / 2)
.easing(TWEEN.Easing.Linear.None)
.onComplete(() => {
//Finish
new TWEEN.Tween(spacecraftGroup.position)
.to({x: initialPosition.x, z: initialPosition.z}, animationDuration)
.easing(TWEEN.Easing.Linear.None)
.onComplete(() => {
// Repeat the movement
moveSpacecraft();
})
.start();
})
.start();
})
.start();
})
.start();
})
.start();
})
.start();
})
.start();
})
.start();
}).start();
}
// Call the moveSpacecraft function to start the movement
moveSpacecraft();
}
Thank you for the helps!
I tried to modify the axes but nothing much happened, the spacecraft just stopped during the turn and moved forward after the animation ended where it had the right position