Pan by code using OrbitControls

Questions
1

Given the a canvas, I can pan the canvas from postion [0,0,0] to [100,100,0] using Orbitcontrol.

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

My camera is at [0,0,100] and looks at [0,0,0] where RED point [0,0,0] is the center point.
image

I want to pan the camera so that BLUE point [100,100,0] will be in the center. It is obvously to do using the mouse. However how to do it by code please?

Thank you.

2

camera.position.set(100,100,0);

3

Thanks but doesnt work. I think we need to move the camera to looks at [100,100,0] the BLUE point somehow.

4

camera.position.set(100,100,0);
camera.lookAt(100,100,0);

5

needs to be camera.position.set(100, 100, 100); :thinking:

6

Since you’re mentioning that you’re using OrbitControls(), you’ll probably have to set this as well, so the blue sphere stays in the center even as you apply rotations via your input device:

controls = new OrbitControls( camera, renderer.domElement );
...
controls.target = new THREE.Vector3( 100, 100, 0 );
1 Like
7

still not working. Can u help to check if any missing please? Thanks

8

Working then any value are changed:

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

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

Yeah working. thanks. Looks like OrbitControls ref doesnt work somehow.

1 Like