如何让Three.js场景中所有物体适配屏幕？（正交相机+弧球控制器）

直接给你可行的实现步骤和代码，解决你之前的问题：

1. 正确计算场景总包围盒 #

必须遍历所有可渲染物体（包括子物体），才能得到完整的场景范围：

const totalBounds = new THREE.Box3();

// 遍历场景中所有可视的可渲染物体
scene.traverse((obj) => {
  if (obj.visible && (obj.isMesh || obj.isLine || obj.isPoints)) {
    totalBounds.expandByObject(obj);
  }
});

// 空场景直接返回
if (totalBounds.isEmpty()) return;

2. 设置控制器目标为包围盒中心 #

弧球控制器的旋转/缩放都是围绕target进行的，必须把目标定位到场景中心，否则缩放后物体可能偏离视野：

const boundsCenter = new THREE.Vector3();
totalBounds.getCenter(boundsCenter);

controls.target.copy(boundsCenter);
controls.update(); // 强制控制器更新目标位置

3. 计算并调整正交相机的Zoom值 #

正交相机的视野由zoom属性和宽高比共同决定，计算时要兼顾场景尺寸和屏幕比例，避免拉伸或物体贴边：

const boundsSize = new THREE.Vector3();
totalBounds.getSize(boundsSize);

const aspect = window.innerWidth / window.innerHeight;
// 计算容纳场景所需的最小Zoom值（加1.2倍 padding 避免物体贴屏）
const requiredZoomX = (boundsSize.x / 2) / aspect;
const requiredZoomY = boundsSize.y / 2;
camera.zoom = Math.max(requiredZoomX, requiredZoomY) * 1.2;

// 必须更新投影矩阵使Zoom生效
camera.updateProjectionMatrix();

4. 同步控制器状态 #

最后更新控制器，确保相机位置和视角同步：

controls.update();

常见问题排查 #

• 之前方案失效大概率是没遍历子物体，导致包围盒只包含顶层物体；
• 若物体仍不在视野中心，检查是否忘记设置controls.target；
• 若出现拉伸，确认计算Zoom时用到了当前屏幕的宽高比；
• 隐藏物体不需要纳入范围的话，记得在遍历判断obj.visible。

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