如何修改React Three Fibre中Canvas默认设置的初始相机位置

一、修改相机初始位置的两种方法 #

1. 直接通过Canvas组件配置 #

Canvas支持直接传入camera属性覆盖默认参数，无需额外组件，直接在标签内设置初始位置：

<Canvas 
  dpr={window.devicePixelRatio}
  camera={{ position: [0, 0, -10] }} // 替换默认的[0,0,5]
>
  {/* 子组件内容 */}
</Canvas>

2. 使用自定义相机组件 #

如果需要更灵活的相机配置，用@react-three/drei的PerspectiveCamera组件，加上makeDefault属性替换默认相机：

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

// 在Canvas内部使用
<Canvas dpr={window.devicePixelRatio}>
  <PerspectiveCamera 
    makeDefault
    fov={75}
    near={0.1}
    far={1000}
    position={[0, 0, -10]} // 自定义初始位置
  />
  {/* 子组件内容 */}
</Canvas>

二、修复OrbitControls参数不生效问题 #

你用的target0是旧版属性，现在需要调整两点：

1. 确保安装了@react-three/drei（OrbitControls由该库提供）
2. 替换target0为target，同时加上makeDefault绑定当前相机，确保参数生效：

<OrbitControls
  target={[0, 0, -5]} // 正确设置目标位置
  enableZoom={true}
  enablePan={true}
  enableRotate={true}
  zoomSpeed={0.6}
  panSpeed={0.5}
  rotateSpeed={0.4}
  makeDefault
/>

另外注意相机位置和target的对应关系，比如相机在[0,0,-10]，target设为[0,0,-5]，视角会自然看向目标点，避免参数冲突。

完整修改后的代码示例 #

import { Canvas } from '@react-three/fiber'
import { OrbitControls, PerspectiveCamera } from '@react-three/drei'
import { Suspense } from 'react'
import Earth from './Earth'

function App() {
  return (
    <CanvasContainer>
      <Canvas dpr={window.devicePixelRatio}>
        <PerspectiveCamera 
          makeDefault
          fov={75}
          near={0.1}
          far={1000}
          position={[0, 0, -10]}
        />
        <gridHelper args={[200,50]}/>
        <axesHelper args={[5]}/>
        <Suspense fallback={null}>
          <OrbitControls
            target={[0, 0, -5]}
            enableZoom={true}
            enablePan={true}
            enableRotate={true}
            zoomSpeed={0.6}
            panSpeed={0.5}
            rotateSpeed={0.4}
            makeDefault
          />
          <Earth/>
        </Suspense>
      </Canvas>
    </CanvasContainer>
  )
}

export default App

内容的提问来源于stack exchange，提问作者ewakwwg12