如何在Three.js中使GLTF模型居中显示且不影响OrbitControls？

你的核心问题是模型未居中到场景原点，且相机与控制器的目标点未对齐模型中心，导致显示截断、旋转行为异常。以下是具体修复步骤：

1. 让模型居中到场景原点 #

GLTF模型初始位置通常不在原点，需先计算模型包围盒，将其平移到场景中心：

loader.load('/chibi_garlic/scene.gltf', (gltf) => {
  const model = gltf.scene;
  scene.add(model);

  // 计算模型包围盒
  const box = new THREE.Box3().setFromObject(model);
  const center = box.getCenter(new THREE.Vector3());
  
  // 将模型平移到原点
  model.position.sub(center);
  
  // 让相机和控制器对准模型中心（原点）
  camera.lookAt(0, 0, 0);
  controls.target.set(0, 0, 0);
  controls.update();
  
  renderer.render(scene, camera);
});

2. 修正相机参数，避免模型被截断 #

你设置的相机near值45过大，可能裁切掉模型近面区域，建议调小：

const camera = new THREE.PerspectiveCamera(
  45,
  266 / 400,
  0.1, // 降低near值，避免模型被裁切
  4000
);

还可以用OrbitControls的fitToBox方法自动调整相机位置，确保模型完整显示：

// 模型加载后添加
controls.fitToBox(box, true);
controls.update();

3. 恢复正确的相机up向量 #

不要设置camera.up.set(0,0,0)，这会破坏Three.js空间坐标系，导致OrbitControls完全失效。默认的(0,1,0)是正确的向上方向，保留即可。

4. 其他优化点 #

• 移除document.body.appendChild(renderer.domElement)，React已渲染canvas元素，重复添加会导致DOM冗余。
• 增加清理函数，避免组件卸载时内存泄漏。

完整修改后的核心代码片段 #

useEffect(() => {
  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(
    45,
    266 / 400,
    0.1,
    4000
  );
  camera.position.set(0, 300, 1000);
  
  const canvas = document.getElementById('garlic'); 
  const renderer = new THREE.WebGLRenderer({canvas, antialias: true});
  renderer.setSize(266, 400);
  renderer.setClearColor(0xffffff, 0);

  const controls = new OrbitControls(camera, renderer.domElement);
  controls.enableDamping = true;
  controls.enablePan = true;

  const loader = new GLTFLoader();
  loader.load('/chibi_garlic/scene.gltf', (gltf) => {
    const model = gltf.scene;
    scene.add(model);

    const box = new THREE.Box3().setFromObject(model);
    const center = box.getCenter(new THREE.Vector3());
    model.position.sub(center);

    camera.lookAt(0, 0, 0);
    controls.target.set(0, 0, 0);
    controls.fitToBox(box, true);
    controls.update();
  });

  const animate = () => {
    controls.update();
    renderer.render(scene, camera);
    window.requestAnimationFrame(animate);
  };
  animate();

  // 组件卸载时清理资源
  return () => {
    controls.dispose();
    renderer.dispose();
  };
}, []);

修改后模型会自动居中到画布，OrbitControls可正常围绕模型旋转，不会出现顶部截断或视角异常问题。

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