Three.js：如何将网格居中于另一网格并设置均等边距

核心问题分析 #

你之前的实现仅做了位置居中，未考虑父容器可用空间与子网格的尺寸比例适配，导致两个问题：

1. 子网格宽高比与父容器不匹配时，四边边距不均
2. 子网格尺寸超出父容器可用空间，在透视相机角度下出现溢出

优化思路 #

通过「自适应缩放+精准定位」两步实现均等边距：

1. 计算父容器实际可用尺寸（总尺寸减去双边距）
2. 计算子网格适配可用空间的最大缩放比例（保证完全容纳）
3. 在父容器局部空间内定位子网格，确保四边边距一致

完整代码示例 #

// 定义全局边距变量，可按需调整
const margin = 0.3;

// 父网格（以平面为例）
const parentGeometry = new THREE.PlaneGeometry(5, 3); // 父平面尺寸：宽5，高3
const parentMaterial = new THREE.MeshBasicMaterial({ color: 0xcccccc, side: THREE.DoubleSide });
const parentMesh = new THREE.Mesh(parentGeometry, parentMaterial);
scene.add(parentMesh);

// 子网格（任意几何体均可）
const childGeometry = new THREE.BoxGeometry(2, 2, 0.1); // 子网格原始尺寸：宽2，高2
const childMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const childMesh = new THREE.Mesh(childGeometry, childMaterial);
parentMesh.add(childMesh); // 将子网格设为父网格子元素，使用局部坐标系计算

// 计算父容器边界盒与尺寸
parentGeometry.computeBoundingBox();
const parentBB = parentGeometry.boundingBox;
const parentSize = parentBB.getSize(new THREE.Vector3());

// 计算子网格原始边界盒与尺寸
childGeometry.computeBoundingBox();
const childBB = childGeometry.boundingBox;
const childOriginalSize = childBB.getSize(new THREE.Vector3());

// 计算父容器可用空间（减去双边距）
const availableWidth = parentSize.x - 2 * margin;
const availableHeight = parentSize.y - 2 * margin;

// 计算最大适配缩放比例（取宽高方向较小值，避免溢出）
const scaleX = availableWidth / childOriginalSize.x;
const scaleY = availableHeight / childOriginalSize.y;
const scaleFactor = Math.min(scaleX, scaleY);

// 应用缩放至子网格
childMesh.scale.set(scaleFactor, scaleFactor, 1); // z轴缩放可按需调整

// 计算子网格在父局部空间的精准位置
const childScaledHalfX = (childOriginalSize.x * scaleFactor) / 2;
const childScaledHalfY = (childOriginalSize.y * scaleFactor) / 2;

// 父平面默认中心在局部原点，边界盒min为(-parentSize.x/2, -parentSize.y/2, 0)
const posX = -parentSize.x / 2 + margin + childScaledHalfX;
const posY = -parentSize.y / 2 + margin + childScaledHalfY;
childMesh.position.set(posX, posY, 0.01); // z轴设微小值避免与父平面重叠

关键注意事项 #

• 必须调用computeBoundingBox()：Three.js几何体默认不计算边界盒，需手动触发
• 使用局部坐标系：将子网格设为父网格子元素，避免父网格平移/旋转时的坐标混乱
• 透视相机适配：若使用透视相机，需确保父网格在相机视锥体范围内，可调整相机位置或fov参数避免裁剪

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