正交相机下3D对象初始适配窗口问题求助

核心思路 #

把初始适配和窗口resize响应拆分开：

1. 初始化时单独计算相机位置和缩放，确保对象完全显示在窗口内
2. 后续窗口resize只更新渲染器尺寸和相机宽高比，不修改相机视锥体或缩放，让轨道控制完全接管相机操作

代码实现 #

1. 初始适配函数（仅调用一次）

在对象加载完成或页面初始化时调用，计算合适的相机位置和缩放，确保整个对象无裁剪显示：

import * as THREE from 'three';

// 初始化时调用，让目标对象完全适配窗口
export function fitObjectToWindow(camera, renderer, targetObject) {
  // 获取对象的包围盒
  const boundingBox = new THREE.Box3().setFromObject(targetObject);
  const objectCenter = boundingBox.getCenter(new THREE.Vector3());
  const objectSize = boundingBox.getSize(new THREE.Vector3());

  // 计算相机需要的Z轴位置（确保能容纳对象的最大尺寸）
  const maxObjectDim = Math.max(objectSize.x, objectSize.y, objectSize.z);
  const cameraZ = maxObjectDim / (2 * Math.tan(Math.PI * camera.fov / 360));

  // 将相机定位到对象正前方，看向对象中心
  camera.position.set(objectCenter.x, objectCenter.y, objectCenter.z + cameraZ);
  camera.lookAt(objectCenter);

  // 计算适配窗口的缩放比例：取宽/高方向的最小值，避免裁剪
  const windowAspect = window.innerWidth / window.innerHeight;
  const objectAspect = objectSize.x / objectSize.y;
  let zoom;

  if (windowAspect > objectAspect) {
    // 窗口比对象宽，按高度适配
    zoom = window.innerHeight / objectSize.y;
  } else {
    // 窗口比对象高，按宽度适配
    zoom = window.innerWidth / objectSize.x;
  }

  // 留10%的边距（可选，可调整或移除）
  zoom *= 0.9;

  // 设置相机缩放并更新投影矩阵
  camera.zoom = zoom;
  camera.updateProjectionMatrix();
}

2. 修改窗口resize处理函数

后续窗口大小变化时，仅做基础的渲染器和相机宽高比更新，不干扰轨道控制：

export function onWindowResize(camera, renderer) {
  const width = window.innerWidth;
  const height = window.innerHeight;
  const canvas = renderer.domElement;

  if (canvas.width !== width || canvas.height !== height) {
    renderer.setSize(width, height);
    // 仅更新相机宽高比，不修改视锥体参数
    camera.aspect = width / height;
    camera.updateProjectionMatrix();
  }
}

关键说明 #

• 问题根源：之前的代码每次resize都重置相机视锥体，直接覆盖轨道控制的调整导致失效；同时用对象最大尺寸计算视锥体，未匹配窗口与对象的宽高比，引发裁剪问题
• 轨道控制兼容：确保OrbitControls实例的enableZoom处于开启状态（默认开启），初始适配完成后，控制会自动接管相机的缩放、旋转操作
• 边距调整：代码中的0.9缩放系数是为了给对象周围留空白，可根据需求修改为1或其他值

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