[SOLVED] React Three Fiber OrbitControls Initial zoom wider

React Three Fiber OrbitControls Initial zoom wider

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

Solution

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.