React Three Fiber OrbitControls Initial zoom wider

Question

I am working on this codesandbox to do practice with React Three Fiber.

My question with the demo is that i do not really understand how i can set the initial zoom way wider in OrbitControls in order that i can see more small stars?

This is the relevant code where i think i need to pass the zoom values

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

I was digging in the official website to understand what is actually needed for OrbitControls to configure the initial zoom

Answer 1

You can set the camera's initial position further away. In three.js you would do:

camera.position.set(x, y, z); // The point where you want the camera
controls.update();

Seems to work in this demo as well. Try e.g. moving away on the x axis:

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

See sandbox fork.