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

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

• javascript
• three.js
• react-three-fiber
• react-three-drei
• orbitcontrols

1 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.