2

I am using React Three Fibre, using the Canvas component it sets up a scene and camera with default parameters:

{ fov: 75, near: 0.1, far: 1000, position: [0, 0, 5] }

I want to change the position parameters in particular, I can change the position like so from inside other components:

useThree(({camera}) => {
        
      });

However I want to have some initial position set either by some dedicated camera component or from inside App.jsx

<CanvasContainer>
        <Canvas dpr={window.devicePixelRatio}>
          <gridHelper args={[200,50]}/>
          <axesHelper args={[5]}/>
          <Suspense fallback={null}>
            <OrbitControls
              target0={[0,0,-5]}
              enableZoom={true}
              enablePan={true}
              enableRotate={true}
              zoomSpeed={0.6}
              panSpeed={0.5}
              rotateSpeed={0.4}
            />
            <Earth/>
          </Suspense>
        </Canvas>
    </CanvasContainer>

The orbit controls approach isn't working for me either as the z parameter starts out at 5 regardless, instead of -5

ewakwwg12
  • 71
  • 7

1 Answers1

0

It sounds like you're only trying to set the initial camera position?

In that case, I would recommend you create an explicit declaration for the Three.js camera component outside of the Canvas element. This will decouple the camera object and provide a reference for your initial changes.

let camera = new THREE.PerspectiveCamera (90, 1.5, 0.1, 1000);

You can set the position or change any other settings for this camera object.

let [x, y, z] = [0, 1, 2];
camera.position.set(x, y, z);

Then you can pass the initial camera state down to the Canvas camera parameter.

<Canvas camera={camera}>
  <gridHelper args={[200, 50]} />
  {/* ... */}
</Canvas>

This seems to work for me, though I'm still learning Three.js, so it may take a few iterations to get it how you want. Hopefully this will point you in the right direction!

olijake
  • 133
  • 1
  • 2
  • 10