Three.js模型位置调整：如何让模型居中落在平面上？

要让模型在平面上居中且底部贴合平面，核心是通过模型的**边界盒（Bounding Box）**计算偏移量，调整模型位置：

步骤1：计算模型的边界信息 #

模型加载完成后，先获取它的轴向边界盒，得到模型在三个轴向上的最小值和最大值：

// 假设loadedModel是你加载完成的模型对象
const box = new THREE.Box3().setFromObject(loadedModel);
const center = box.getCenter(new THREE.Vector3()); // 模型中心点
const size = box.getSize(new THREE.Vector3()); // 模型尺寸

步骤2：调整模型位置 #

• 要让模型底部贴合Y=0的平面（你的GridHelper所在平面），需要把模型的Y轴位置向上偏移模型底部到中心点的距离（直接取-box.min.y即可，因为box.min.y是模型底部的Y坐标）
• 要让模型在X、Z轴上居中，直接把模型的X、Z位置设置为负的中心点X、Z值，抵消模型自身的偏移

代码示例：

// 调整模型位置，底部对齐Y=0平面，同时X、Z轴居中
loadedModel.position.set(
  -center.x,
  -box.min.y,
  -center.z
);

补充：如果模型是多子对象组成的组 #

如果你的模型是THREE.Group，setFromObject依然能正确计算整个组的边界盒，上面的代码同样适用。

结合你的场景代码 #

你需要在模型加载完成的回调里加入上述逻辑，比如用GLTFLoader加载的话：

const loader = new THREE.GLTFLoader();
loader.load('你的模型路径.glb', (gltf) => {
  const model = gltf.scene;
  this.scene.add(model);

  // 计算边界盒并调整位置
  const box = new THREE.Box3().setFromObject(model);
  const center = box.getCenter(new THREE.Vector3());
  model.position.set(-center.x, -box.min.y, -center.z);
});

这样处理后，模型就能准确落在GridHelper平面上，并且在X、Z轴方向居中了。

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