Increase initial zoom for React Three Fiber OrbitControls to provide a wider view

Question

I've been working on a project in React Three Fiber using this codesandbox for practice.

My query regarding the demo is about setting a wider initial zoom in OrbitControls to view more small stars. Can anyone help with this?

Below is the code snippet where I believe the zoom values need to be passed:

<OrbitControls
    enableZoom={true}
    enablePan={true}
    enableRotate={true}
/>

I've been searching through the official documentation to figure out the correct configuration for OrbitControls to set the initial zoom level.

Answer 1

Answer №1

To adjust the initial position of the camera, you can set it further away. In three.js, you can achieve this with the following code:

camera.position.set(x, y, z); // Specify the desired camera position
controls.update();

This method appears to be effective in the provided demo. You can try moving the camera away on the x-axis, for instance:

<PerspectiveCamera
  makeDefault
  position={[500, 0.9, 1.8]}
  fov={60}
  zoom={0.9}
/>

Feel free to check out the sandbox fork.

Answer 2

To adjust the initial position of the camera, you can set it further away. In three.js, you can achieve this with the following code:

camera.position.set(x, y, z); // Specify the desired camera position
controls.update();

This method appears to be effective in the provided demo. You can try moving the camera away on the x-axis, for instance:

<PerspectiveCamera
  makeDefault
  position={[500, 0.9, 1.8]}
  fov={60}
  zoom={0.9}
/>

Feel free to check out the sandbox fork.