Animate ArcRotateCamera using GSAP

Questions
1

I am trying to animate the arcRotateCamera when I first enter the scene and I would like to do a small rotation with a zoom in. The issue I am having is that I am only able to affect the positioning of the camera and not the rotation. I am able to do this by selecting the camera.target’s position but this is the only attribute I am able to select with GSAP. How can I select the camera’s rotation?

Here is the simple gsap script to affect the target.

gsap.to(camera.target, {
          duration: 3,
          z: -2,
          ease: "linear",
        });
2

I believe for the arcRotateCamera you may use camera.alpha and camera.beta

image
image512×512 113 KB

Docs - Camera Introduction | Babylon.js Documentation

2 Likes
3

so then gsap would look like…?

        gsap.to(camera.alpha, {
          duration: 3,
          alpha: Math.PI,
          ease: "linear",
        });

This didn’t work for me and I received the error below. I installed GSAP and ran the scene using parcel btw.
“Invalid property alpha set to 3.141592653589793 Missing plugin? gsap.registerPlugin()”

4

Shouldn’t the first parameter be camera not camera.alpha? Otherwise the way you have it it’s trying to animate camera.alpha.alpha I guess…

gsap.to(camera, {
    duration: 3,
    alpha: Math.PI,
    ease: "linear",
});
3 Likes
5

you’re a genius…