如何使用react-three-fiber与@react-three/drei调整相机居中3D模型

根因说明 #

你在Canvas上配置的相机参数不生效，是因为@react-three/drei的Stage组件默认会自动接管相机控制权，直接覆盖你自定义的所有相机配置，所以不管怎么改position参数都看不到变化。

解决方案 #

方案1：保留Stage组件

如果需要保留Stage自带的默认光照、阴影等配置，给Stage添加adjustCamera={false}属性即可关闭它自动接管相机的逻辑，你自定义的相机参数就能正常生效：

<Canvas camera={{ fov: 70, position: [0, 1000, 1000] }}>
  <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
  {/* 新增adjustCamera={false}属性 */}
  <Stage adjustCamera={false}>
    <group dispose={null}>
      <primitive scale={[1, 1, 1]} object={scene} />
    </group>
  </Stage>
</Canvas>

如果修改完相机参数后模型还是有偏移，说明你加载的GLB模型本身的原点不在中心，可以手动计算模型包围盒调整位置居中：

import { Box3, Vector3 } from 'three'

const CanvasContainer = () => {
  const { scene } = useGLTF("/scene.glb");
  // 计算模型包围盒，偏移模型让其中心点对齐场景原点
  const box = new Box3().setFromObject(scene)
  const center = box.getCenter(new Vector3())
  scene.position.sub(center)
  return (
    // 其余代码保持不变
  )
}

方案2：移除Stage组件

如果不需要Stage的默认配置，直接删除<Stage>标签即可，你的自定义相机参数会直接生效，后续可以按需自行添加灯光、阴影等配置：

<Canvas camera={{ fov: 70, position: [0, 1000, 1000] }}>
  <OrbitControls enablePan={true} enableZoom={true} enableRotate={true} />
  {/* 自行添加灯光配置 */}
  <ambientLight intensity={0.5} />
  <directionalLight position={[10, 10, 5]} intensity={1} />
  <group dispose={null}>
    <primitive scale={[1, 1, 1]} object={scene} />
  </group>
</Canvas>

内容的提问来源于stack exchange，提问作者C.V.Alkan