ThreeJS中GLB场景内SVG网格组平移至目标组中心异常求助

问题现象 #

• 尝试用THREE.Box3().setFromObject()获取两组网格的包围盒中心，平移待移动组到目标组中心，但得到的中心值都接近0，和预期的x:5、y:5.5、z:0.5左右的平移值完全不符
• 待移动组在左上角，目标组在底部（红色），已用Box3Helper确认位置，但两组的position都接近0
• 缩放SVG网格组时，缩放不是绕自身中心进行

核心原因 #

问题出在SVG生成的网格组，几何中心和组的原点不重合：

1. Box3.setFromObject()计算的是组局部空间内的包围盒中心（相对于组原点），不是世界空间的实际位置
2. 缩放默认绕组原点（而非几何中心）执行，所以会出现偏移

解决方案 #

临时修复：调整子元素位置对齐组原点 #

通过偏移组内所有子元素，让组的原点和几何中心重合：

// 获取组的尺寸
const box = new THREE.Box3().setFromObject(svgGroup);
const size = new THREE.Vector3();
box.getSize(size);

// 计算偏移量，让子元素向组中心移动
const yOffset = size.y / -2;
const xOffset = size.x / -2;

// 偏移所有子元素（用+=避免覆盖原有相对位置）
svgGroup.children.forEach(item => {
  item.position.x += xOffset;
  item.position.y += yOffset;
});

更规范的方法：重设组的支点（Pivot） #

不想修改子元素位置的话，可以通过父容器重设支点，后续平移/缩放都会围绕几何中心进行：

// 获取svg组的几何中心（局部空间）
const box = new THREE.Box3().setFromObject(svgGroup);
const groupCenter = new THREE.Vector3();
box.getCenter(groupCenter);

// 创建父容器作为新支点
const pivot = new THREE.Object3D();
svgGroup.parent.add(pivot);
pivot.add(svgGroup);

// 将svg组移到支点原点（几何中心对齐支点原点）
svgGroup.position.sub(groupCenter);

// 平移到目标组中心示例：
const targetBox = new THREE.Box3().setFromObject(targetGroup);
const targetCenter = new THREE.Vector3();
targetBox.getCenter(targetCenter);
// 转换目标中心到支点的父空间（如果需要）
svgGroup.parent.localToWorld(targetCenter);
pivot.position.copy(targetCenter);

关键提示 #

• GLB导入的模型如果本身原点和几何中心不重合，就会出现这类问题，必须手动修正支点
• 如果需要获取世界空间的包围盒中心，要把局部中心转换为世界坐标：

const worldCenter = new THREE.Vector3();
new THREE.Box3().setFromObject(svgGroup).getCenter(worldCenter);
svgGroup.localToWorld(worldCenter); // 转换为世界空间坐标

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