react-three-fiber如何设置.glb模型默认相机正视角初始位置

两种方案均可实现初始相机正对模型正面的效果，按需选择即可：

方案1：复用glb文件内从Blender导出的相机 #

该方案直接使用你在Blender中调试好的视角参数，无需手动计算坐标：

• 导出glb前确认导出设置中已勾选Camera选项，保持默认的+Y向上坐标轴转换规则开启，避免轴向错乱
• 加载模型后提取文件内的相机对象，替换react-three-fiber默认相机即可，参考实现代码：

import { Canvas, useThree } from '@react-three/fiber'
import { useGLTF } from '@react-three/drei'
import { useEffect } from 'react'

function ModelScene() {
  const { scene, cameras } = useGLTF('/your-model-path.glb')
  const { set: setThreeStore } = useThree()

  useEffect(() => {
    const exportedCamera = cameras[0]
    if (exportedCamera) {
      setThreeStore({ camera: exportedCamera })
    }
  }, [cameras, setThreeStore])

  return <primitive object={scene} />
}

export default function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <directionalLight position={[10, 10, 5]} intensity={0.8} />
      <ModelScene />
    </Canvas>
  )
}

若替换相机后出现视角翻转，检查Blender导出设置中的轴向参数，确保向前轴为-Z、向上轴为Y，和three.js默认坐标规则对齐即可。

方案2：自动计算位置对齐模型正面 #

如果不想依赖模型内置相机，可在模型加载后自动计算包围盒，动态设置相机位置，该方案适配任意模型，无需提前在建模软件中配置相机：

import { Canvas, useThree } from '@react-three/fiber'
import { useGLTF } from '@react-three/drei'
import { useEffect } from 'react'
import * as THREE from 'three'

function Model() {
  const { scene } = useGLTF('/your-model-path.glb')
  const { camera } = useThree()

  useEffect(() => {
    // 计算模型包围盒，获取模型尺寸与中心坐标
    const boundingBox = new THREE.Box3().setFromObject(scene)
    const modelSize = boundingBox.getSize(new THREE.Vector3())
    const modelCenter = boundingBox.getCenter(new THREE.Vector3())

    // 将模型平移至场景原点，消除模型本身的位置偏移
    scene.position.sub(modelCenter)

    // 计算合适的相机距离，保证模型完整显示在视口内
    const maxDimension = Math.max(modelSize.x, modelSize.y, modelSize.z)
    const fovRadian = camera.fov * (Math.PI / 180)
    const fitDistance = Math.abs(maxDimension / 2 / Math.tan(fovRadian / 2)) * 1.5

    // 设置相机位置正对模型正面，若显示侧视图将z轴值改为负即可
    camera.position.set(0, modelSize.y * 0.3, fitDistance)
    camera.lookAt(0, 0, 0)
    camera.updateProjectionMatrix()
  }, [scene, camera])

  return <primitive object={scene} />
}

export default function App() {
  return (
    <Canvas camera={{ fov: 50 }}>
      <ambientLight intensity={0.6} />
      <directionalLight position={[5, 5, 5]} intensity={1} />
      <Model />
    </Canvas>
  )
}

• 若加载后仍显示侧视图，直接调整camera.position的轴向即可：Blender默认正前方向对应three.js的-Z轴，若未做轴向转换，把z轴值设为-fitDistance即可切到正面视角。
• 代码中距离计算乘的1.5为视口留白系数，可根据想要的视角缩放程度调整为1.2/2等数值，数值越大模型显示越小。

• 视角偏移90度：为坐标轴朝向不匹配导致，要么调整Blender导出时的轴向设置，要么修改相机位置的对应轴参数即可。
• 模型显示裁切/不全：调大视口留白系数，或缩小模型的scale值。
• 内置相机替换不生效：加载模型后打印cameras数组，确认glb文件中确实包含导出的相机对象。

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