Solutions to animate lookAt in a solar system scene

[echo kettle]

I'm almost finished a simple solar system in R3F and need some help with my Camera Controleller component. I made a context for what state the camera should be in then I animate it.

The issue im having is i just cant figure out how to make lookAt animated, currently it just snaps to what im looking at, the lerp however is smooth. I thought react spring web might be a good option but i wasnt able to implement it. does anyone have any suggestions?

here is a live demo: https://threejs-solar-system-eta.vercel.app

const CameraController: React.FC = () => {
  const orbitControlsRef = useRef<any>(null); // FIX ANY TYPE 
  const { camera } = useThree();
  const [selectedPlanet] = useSelectedPlanet();
  const { planetPositions } = usePlanetPositions();
  const { cameraState, setCameraState } = useCameraContext();
  const homePosition = new Vector3(7, 6, 7);
  const lerpFactor = 0.05;

  useFrame(() => {
    const controls = orbitControlsRef.current;

    switch (cameraState) {
      case 'FREE':
        if (controls) controls.enabled = true;
        break;

        case 'ZOOMED_IN':
          if (selectedPlanet) {
            const currentPlanetPosition = planetPositions[selectedPlanet.name];
            if (currentPlanetPosition && controls) {
              controls.enabled = false;
              const planetPosition = new Vector3(...currentPlanetPosition);

              const targetCameraPosition = planetPosition.clone().add(new Vector3(1, 0.5, 0).multiplyScalar(selectedPlanet.radius * 3));
              camera.position.lerp(targetCameraPosition, lerpFactor);
              camera.lookAt(planetPosition);
            }
          }
          break;
        

      case 'MOVING_TO_HOME':
        if (controls) controls.enabled = false;
        camera.position.lerp(homePosition, lerpFactor);
        camera.lookAt(new Vector3(0, 0, 0));
        if (camera.position.distanceTo(homePosition) < 0.1) {
          camera.position.copy(homePosition);
          setCameraState('FREE');
        }
        break;
      
    }

    camera.updateProjectionMatrix();
  });

  return (
    <DreiOrbitControls
      ref={orbitControlsRef}
      enableZoom={true}
      rotateSpeed={0.7}
      zoomSpeed={0.7}
    />
  );
};

export default CameraController;

[plain egret]

try cameraControls instead of orbitcontrols , it has some options to animate camera

[echo kettle]

thanks for the suggestion! I've been looking into using camera controls instead of orbit controls, would this need a full rewrite or is it relatively easy to switch between the two?

[plain egret]

Check the drei docs and examples should be a easy swap

[echo kettle]

thanks i'll check it out 🙂

[echo kettle]

thanks for the suggestion but I didn't have much luck moving to CameraControls, some things worked but others didn't. I found the docs a bit confusing but the storybooks helped. i'm going to try again with react spring or gsap using Orbit Controls