如何在R3F中自动为GLB模型设置合适的相机位置？

核心问题原因 #

你的椅子模型偏离原点过远，是因为模型本身的几何中心和坐标系原点不重合，导致OrbitControls默认的相机视角无法对准模型。主流在线3D查看器都会自动处理模型居中+相机适配，以下是具体实现方法：

1. 手动计算包围盒居中模型 #

用Three.js的Box3计算模型的包围盒，然后将模型平移到坐标系原点：

import { useGLTF } from '@react-three/drei'
import { Box3, Vector3 } from 'three'

const ChairModel = ({ scale = 1 }) => {
  const gltf = useGLTF("chair.glb")
  // 计算模型包围盒
  const boundingBox = new Box3().setFromObject(gltf.scene)
  // 获取包围盒中心
  const centerPoint = new Vector3()
  boundingBox.getCenter(centerPoint)
  // 平移模型到原点
  gltf.scene.position.sub(centerPoint)

  return <primitive object={gltf.scene} scale={scale} />
}

2. 让OrbitControls自动适配视角 #

模型居中后，调用OrbitControls的fitToBox方法，让相机自动调整到合适位置，完整显示模型：

import { useRef, useEffect } from 'react'
import { OrbitControls, useGLTF } from '@react-three/drei'
import { Box3, Vector3 } from 'three'

const ModelViewer = () => {
  const controlsRef = useRef(null)
  const gltf = useGLTF("chair.glb")
  const boundingBox = new Box3().setFromObject(gltf.scene)

  useEffect(() => {
    if (controlsRef.current && boundingBox) {
      // 适配包围盒，第二个参数保持相机当前方向
      controlsRef.current.fitToBox(boundingBox, true)
      // 可选：设置缩放限制，避免视角极端
      const modelSize = boundingBox.getSize(new Vector3()).length()
      controlsRef.current.minDistance = modelSize * 0.3
      controlsRef.current.maxDistance = modelSize * 6
    }
  }, [gltf, boundingBox])

  return (
    <Canvas>
      <OrbitControls ref={controlsRef} />
      <Environment preset="sunset" blur={0.8} />
      <ChairModel />
    </Canvas>
  )
}

3. 用drei的Center组件简化操作 #

drei库提供了Center组件，自动帮你完成模型居中，无需手动计算：

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

const ChairModel = ({ scale = 1 }) => {
  const gltf = useGLTF("chair.glb")
  return (
    <Center>
      <primitive object={gltf.scene} scale={scale} />
    </Center>
  )
}

将以上方法结合，就能实现和在线查看器一样的自动适配效果，不管加载什么模型，相机都会自动对准并完整显示。

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