Replacing default perspective camera in reactJS app

Questions
1

The default threeJS camera is perspective so that my rotating model distorts as it rotates. I need an orthographic camera instead to avoid this. The threeJS documentation is a little hard to follow - my environment is reactJS.

In my code there is no reference at all to any camera - I guess it just comes with threeJS…

Does anyone know hot to acquire an orthographic camera and delete or suppress the perspective camera in a reactJS react-three-fiber environment?

I have included an orthographic camera in my gltf scene import but I have no idea how to select it…

2

Apparently you need to set the camera as a default

function Camera(props) {
  const ref = useRef()
  const { setDefaultCamera } = useThree()
  // Make the camera known to the system
  useEffect(() => void setDefaultCamera(ref.current), [])
  // Update it every frame
  useFrame(() => ref.current.updateMatrixWorld())
  return <perspectiveCamera ref={ref} {...props} />
}

<Canvas>
  <Camera position={[0, 0, 10]} />

and replace <perspectiveCamera> with <orthographicCamera>

source

3

Thank you for the suggestion.

react-three-fiber does things a little differently. This solution was adapted from a suggestion by the developer this morning and works properly now.

  <Canvas orthographic camera={{ zoom: 50, position: [0, 0, 100] }} >
    <ambientLight /> 
    <pointLight position={[10, 10, 10]} />
    <directionalLight intensity={4.16} />
    <Suspense fallback={<Loading />}>
      <YourModel />  // function which creates your model
    </Suspense>
  </Canvas>