React Three Fiber Pan

Questions
1

When I right click, I can move my camera up and down. By default, when my model loads, half of its body is out of the frame. I want to move the camera down, so the whole body fits in the frame. Is there a setting to do this? I’ve tried using camera position but that didn’t work. Thank you!

2

Show us your code. It’s hard to tell what’s going wrong if we have nothing to look at.

3

Hi! Here’s some code, what I was trying to set is the inital position of the Pan in OrbitControls.

             <Canvas 
                    pixelRatio={window.devicePixelRatio}
                    performance={{ min: 0.5 }}
                    gl={{alpha:true, antialias:true, preserveDrawingBuffer:true}}
                    gl2={true}
                    linear={true}
                    flat={true}
                    colorManagement={true}
                    concurrect={true}
                    frameloop="always"
                    concurrent
                    camera={{ position: [0,-5,-10], fov: 45 }}
                >

                <Model />

                <OrbitControls 
                    enablePan={true} 
                    minPolarAngle={1.5}
                    maxPolarAngle={1.5}
                    minDistance={0.5}
                    maxDistance={5}
                    enableZoom={true}
                    autoRotate={rotate}
                />
                
              </Canvas>
4

You can try using the <Stage> component.

5

the canvas looks wild, like half of the config props don’t exist: React Three Fiber Documentation

you could move the whole scene:

<Canvas>
  <group position={[0, 1, 0]}>
    <...
  </group>

move the camera

<Canvas onCreated={state => {
  state.camera.position.set(...
  state.camera.lookAt(0, 0, 0)

use stage or center from drei (probably center though, stage is mostly for prototyping)

import { Center } from '@react-three/drei'

<Canvas>
  <Center>
    <...
1 Like