Tween animation circular motion

29 Views Asked by At

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

0

There are 0 best solutions below