How to set OrbitalControls initial position?

user_13111779 0
Viewed 703

I've been messing around with react-three-fiber and really liked the OrbitControls element which lets you control the camera by dragging the mouse around.

My doubt is if there's a way to control the initial position/perspective of the element.

I'm creating a demo and I'm using a a plane to simulate the ground. It looks fine when seen from above but on the default position it becomes invisible, like looking a sheet of paper horizontally.

I tried to mess around with some properties like position and minPolarAngle but couldn't observe any difference. Any one out there could help on this one?

      <Canvas>
        <OrbitControls position={[10, -40, 0]} /> // 'position' doesn't seem to work
        <ambientLight intensity={0.4} />

        <Suspense fallback={"...Loading"}>
          <Stars />
          <Box/>
          <Ground />
        </Suspense>

      </Canvas>
react-three-fiber three.js reactjs
1 Answers

OrbitControls will use the existing camera and respect its initial position*, so you don't need to do anything specialized; just specify the camera prop on Canvas.

*but not its initial rotation. OrbitControls will instantly overwrite any calls to camera.lookAt. In that case, specify a target (defaults to [0,0,0]).

<Canvas camera={{ fov: 45, position: [10, -40, 0] }}>
  <OrbitControls target={[10, 0, 0]} />
</Canvas>
user_13647570
Related