如何在Three.js中对导入的GLTF模型正确缩放、定位以适配场景尺寸

问题表现 #

• 加载模型后仅显示渐变背景，无模型内容：
• 未加载模型时渐变背景显示正常：
• 目标加载模型应为橙色造型：

存在的代码问题 #

1. 执行顺序错误：GLTFLoader初始化及加载逻辑写在场景、相机等核心对象初始化之前，回调触发时browserscene尚未定义，模型无法被添加到场景中。
2. 模型位置超出视野：相机坐标为(0,0,2)，模型被设置为x=10、y=20，完全处于相机视锥体之外，即使添加成功也不可见。
3. 缩放参数不全：仅设置了x、y轴缩放，z轴保持默认值1，会导致模型变形。
4. 缺少模型尺寸适配逻辑：外部导出的GLB模型默认尺寸差异较大，没有自动适配逻辑容易出现模型过大/过小不可见的问题。

修复后代码 #

// Canvas
const canvas = document.querySelector('canvas.webgl')

// Scene
const browserscene = new THREE.Scene()

// Lights
var light = new THREE.HemisphereLight(0x404040, 0xFFFFFF, 10);
browserscene.add(light);

const sizes = {
  width: window.innerWidth,
  height: window.innerHeight
}

window.addEventListener('resize', () => {
  // Update sizes
  sizes.width = window.innerWidth
  sizes.height = window.innerHeight

  // Update camera
  camera.aspect = sizes.width / sizes.height
  camera.updateProjectionMatrix()

  // Update renderer
  renderer.setSize(sizes.width, sizes.height)
  renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
})


const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 0.1, 1000)
camera.position.z = 5
browserscene.add(camera)

const renderer = new THREE.WebGLRenderer({
  canvas: canvas, antialias: true, alpha: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))

// 模型加载逻辑移到所有核心对象初始化之后
const loader = new GLTFLoader();
const gui = new dat.GUI()
loader.load('orange.glb', (gltf) => {
  const model = gltf.scene
  browserscene.add(model)
  
  // 重置模型位置到坐标系原点
  model.position.set(0,0,0)
  // 统一三轴缩放
  model.scale.set(1,1,1)
  
  // 自动适配模型尺寸和相机位置，可选逻辑
  const box = new THREE.Box3().setFromObject(model)
  const size = box.getSize(new THREE.Vector3())
  const maxDim = Math.max(size.x, size.y, size.z)
  const fitScale = 2 / maxDim
  model.scale.multiplyScalar(fitScale)
});

const animate = () => {
  requestAnimationFrame(animate)
  renderer.render(browserscene, camera)
}

animate()

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