How to pan the camera by code in react-three/fiber and react-three/drei

Question

I can pan the the camera from default position [0,0,0] to [100,100,0] using the mouse with OrbitControls. However still fail to do the panning by code.

<Canvas
        camera={{
          position: [0, 0, 100],
          up: [0, 0, 1],
        }}
      >
        <OrbitControls />
        <ambientLight />
        <FakeSphere position={[0, 0, 0]} color="red" />
        <FakeSphere position={[100, 100, 0]} color="blue" />
      </Canvas>

Any idea please.

Answer 1

We need to move the camera to [100,100,100] and look at to [100,100,0]

useEffect(() => {
    if (!controls || !camera) return;

    camera.position.set(100, 100, 100);
    controls.target.set(100, 100, 0);
  }, [camera, controls]);