Rotate Camera GSAP

Questions
,
1

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

Untitled-2
Untitled-2700×364 30.9 KB

2

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,
    });
  };
3

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

4

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.

5

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
6

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
7

Thank you everyone

8

Hi Rahul, im currently trying to attach the gsap scroll trigger to the blender camera animation imported using gltf, and it seems like that code you attached is helpful. Do you have any available samples or projects where u used the same approach?

9 
function moveCameraToTarget(x, y, z) {
  // Get the current spherical coordinates of the camera
  const startSpherical = new THREE.Spherical();
  startSpherical.setFromVector3(camera.position);

  // Calculate the spherical coordinates of the target position
  const targetSpherical = getSphericalFromXYZ(x, y, z);

  // Maintain the same radius (distance from the origin)
  targetSpherical.radius = startSpherical.radius;

  gsap.to(startSpherical, {
      theta: targetSpherical.theta,
      phi: targetSpherical.phi,
      duration: 0.75,  // Animation duration in seconds
      ease: "power3.inOut",
      onUpdate: function () {
          // Convert back to Cartesian coordinates and update the camera position
          camera.position.setFromSpherical(startSpherical);
          camera.lookAt(new THREE.Vector3(0, 0, 0));  // Keep looking at the origin
      }
  });
}
1 Like