Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to set OrbitalControls initial position?

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>

like image 972
Felipe Chernicharo Avatar asked Nov 04 '25 13:11

Felipe Chernicharo


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>
like image 128
Hypershadsy Avatar answered Nov 06 '25 03:11

Hypershadsy



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!