Rotate Camera GSAP

Hi,
How to rotate the camera along a circular path with GSAP between two points while camera.lookAt(0,0,0).

I’d be better if you could have mentioned your code. But I’m assuming you’ve exported your blender camera animation into threejs. If you’re using R3F then things will be more easy.

This is how I’m using for my project. In plain vanilla threejs using use gsap to control the gltf animation keyframe/duration.

const cameraTime = (t, d) => {
    gsap.to(actions["CameraAction.001"], {
      time: t,
      duration: d,
    });
  };

No, I used blender to show what I mean.

camera position is :

camera.position.set(20, 8, -35);

When I click on the explore button animation starts
the animation function is :

function exploreAnimation() {
    gsap.to(controls.target, {
      duration: 2,
      x: 0,
      y: 0,
      z: 0,
      delay: 1,
      ease: "power3.inOut",
    });
    gsap.to(camera.position, {
      duration: 1,
      x: 0,
      y: 3,
      z: 12,
      delay: 1,
      ease: "power3.inOut",
    });
  }

The problem is that in this case the camera passes through the center and reaches the second point.

I want it to move around a semicircle from the first point, with the certain radius from the center and reach the second point

Something like this should work in case you don’t find anything more elegant:

  1. startVector = (startPos - originPos).normalize()
  2. endVector = (endPos - originPos).normalize()
  3. axisOfRotation = CrossProduct(startVector, endVector)
  4. angleOfRotation = arccos(DotProduct(startVector, endVector))
  5. use GSAP to interpolate the currentAngle between 0 and angleOfRotation over time
  6. on each iteration, use Vector3.applyAxisAngle to calculate the currentVector using the startVector, axisOfRotation, and currentAngle (do not modify the startVector)
  7. on each iteration, set currentCameraPosition = originPos + (currentVector * distance)

Also see [SOLVED] Move items around a sphere and Quaternion.setFromUnitVectors for a quaternion-based approach.

That’s because you’re travelling through two straight point. implementing arc curve in threejs is tricky. that’s why I said do it in blender and then animate the keyframe.

CatmullRom Curve3
https://threejs.org/docs/?q=curve#api/en/extras/curves/CatmullRomCurve3

1 Like

1_ Create an Object3D at the pivot position
2_ Add the camera to the Object3D and set its position/distance
3_ Rotate the Object3D along the desired axis while updating the camera lookAt (if needed)

Here is the fiddle

2 Likes

Thank you everyone