[react-three-fiber] use PointerLockControls with useFrame

Questions
1

In my program, it will update camera position to a 3D object in a model. Then I want it can move the camera around the 3D object.
It now can update camera position, but camera can’t move around a object.
This is my code. How can I fix it?

function Button(props) {
  const vec = new THREE.Vector3(0, 3, 5);
  const { x, y, z } = props.position;
  const { camera, gl } = useThree()

  if (x && y && z) {
    vec.set(x, y, z);
  }

  useFrame((state) => {
    const step = 0.1;
    camera.position.lerp(vec, step)
    camera.lookAt(0, 0, 0)
    camera.updateProjectionMatrix()
  });
  return null;
}

const ModelCanvas = (props) => {
  return (
    <div className="center">
      <Canvas
        shadowMap
        style={{ background: "#ffffff" }}
        // camera={{ position: [0, 3, 10], fov: 100 }}
        camera={{ position: [2, 0, 5], fov: 100 }}
        gl={{ antialias: false, logarithmicDepthBuffer: true }}
        id="my-canvas"
      >
        <ambientLight intensity={0.5} />
        <pointLight position={[0, 60, -100]} intensity={20} />
        <pointLight position={[-50, 0, -50]} intensity={2} />
        <spotLight
          castShadow
          intensity={8}
          angle={Math.PI / 10}
          position={[10, 10, 10]}
          shadow-mapSize-width={2048}
          shadow-mapSize-height={2048}
        />
        <Suspense fallback={null}>
          <Model url={"/compressed.glb"} />
        </Suspense>
        <Button position={props.value} />
        <PointerLockControls />
      </Canvas>
    </div>
  );
};
2

/cc

3

The question on stackoverflow is my post. No one has replied so far, so I came to the forum and modified some contents to post it again. Sorry to send duplicate questions.

4

do you have an example of that behaviour that works? threejs/examples or anything? from the description and the code you posted i still have no idea what you want.

i guess ---- that you want the camera to always look at a certain object that you get to move around? would that not contradict pointerlockcontrols? i don’t think you would be able to look up and down left and right if you do that.

5

I only have a codesandbox about this example. For instance, I want to move the camera around the car after I click button to update camera to look at the car. I’m not clear about the limitations of pointerLockControls. Which control can support?