[React Three Fiber] Camera Animation issues

Questions
, , ,
1

@drcmda I’m having a lot of trouble w/ animating the camera in r3f.
What i wanted to do here was, when an object in the scene is clicked, i want the camera to zoom into the front of the object(meanwhile shifting lookAt point too)

This is the camera component code which i have seperated from Canvas

function Camera(props) {
const ref = useRef()
const { setDefaultCamera, camera } = useThree()
const spring_props = useSpring({config: {mass: 1, tension: 100, friction: 100},pos: props.clicked? props.clickedObjPos: [0,0,50] });


// Make the camera known to the system
useEffect(() => void setDefaultCamera(ref.current), [])

// Update it every frame
useFrame(() => ref.current.updateMatrixWorld())
return <a.perspectiveCamera ref={ref} near={0.1} position={spring_props.pos} {...props} />
}

spring_props is the props created by useSpring hook. It works on the position of the camera when one of the objects in the scene is clicked and feeds in the position of the clicked object as the final value.
clicked is a state variable in the main App component which is set to true when an object is clicked and clickedObjPos is the position of the clicked object.

So, I’m having 3 issues/questions here:

  1. Whenever an onClick event is called on a clicked object and the clicked props is changed, the camera position animates, but at the start frame, there is a white flash on
    the scene background(all objects still visible). I have a cubetexture loaded as the scene.background.
  2. I couldnt find a way to animate the lookat, adding a useSpring prop on the controls.target seems to render a blank canvas.
  3. Is there a cleaner/ best practice to carry out the camera animation in r3f?

I have looked at the resources and couldnt figure out the solutions. So any help would be much appreciated. Thanks in advance.

2

here’s an example, click the sphere framer motion camera focus - CodeSandbox