React-Three-Fiber: Camera Won't Face HoverableCube After GSAP Transition (Controls.Target Issue)

Questions
, , ,
1

Issue Description

I’m using react-three-fiber and I have a function called HoverableCube that creates a transparent, interactive cube. When clicked, it moves le camera clos to it and should have the camera face the cube.

Parameters:

Parameters:
position, rotation, scale, moveTo, setLastCameraPosition, controlsRef

position, rotation, scale → Define where the cube is and its size. moveTo → The camera moves to this 3D vector when the cube is clicked. setLastCameraPosition → Stores the previous camera position before moving controlRef reference state for control.

Problem
:pushpin: The camera does NOT face the cube after moving to moveTo.
No matter where the cube is, the camera always faces (0,0,0) after the GSAP transition.

What I tried

  1. In my App() function:
  const orbitRef = useRef()

Then, passed it down to HoverableCube:

<OrbitControls
  makeDefault
  ref={orbitRef}
  enablePan={false}
  enableZoom={true}
  minPolarAngle={Math.PI / 2.2}
  maxPolarAngle={Math.PI / 2.2}
/>

<HoverableCube
  position={[0, -1, 0]}
  moveTo={[5, 3, -5]}
  setLastCameraPosition={setLastCameraPosition}
  controlsRef={orbitRef}  // Passed to cube
/>
  1. then Used controlsRef to set the getPolarAngle and setFromSpherical.
const handleClick = () => {
    console.log('cube click. Moving to:', moveTo)

    // for reset button
    setLastCameraPosition([camera.position.x, camera.position.y, camera.position.z])

    // camera transition to x,y,z
    gsap.to(camera.position, {
      x: moveTo[0],
      y: moveTo[1],
      z: moveTo[2],
      duration: 1.5,
      ease: 'power2.out',
    })
   // the code that controls camera look-at
    const target = new THREE.Vector3(position[0], position[1], position[2]);
    let sph = new THREE.Spherical(controlsRef.current.getDistance(),
    controlsRef.current.getPolarAngle(), controlsRef.current.getAzimuthalAngle());
    camera.position.setFromSpherical( sph ).add( target )
    camera.lookAt( target )
  
   // also tried this
   camera.lookAt(position[0], position[1], position[2])
    controls.target = controls.target || new Vector3();
    controls.target.set(position[0], position[1], position[2]);

   
  }

Expected Behavior: The camera moves to moveTo & camera faces the cube at position.
Actual Behavior: The camera moves to moveTo. But it faces (0,0,0), NOT the cube

ive been tryuing to fix this for the past few days, im going crazy.