3D 对象应始终“适合”正交相机的窗口内部

Question

我希望我的 3D 对象始终“适合”窗口内 这就是我的代码目前的样子

export function onWindowResize(camera, renderer) {
  const canvas = renderer.domElement;
  const width = window.innerWidth;
  const height = window.innerHeight;
  const connection = getBoundingBox(connectionGroup);
  const needResize = canvas.width !== width || canvas.height !== height;
  const isPortrait = connection.width < connection.height;

  if (needResize) renderer.setSize(width, height);

  const aspect = isPortrait ? width / height : height / width;
  const frustumSize = Math.max(connection.width, connection.height);

  //Front View
  if (isPortrait) {
    camera.left = (-frustumSize * aspect) / 2;
    camera.right = (frustumSize * aspect) / 2;
    camera.top = frustumSize / 2;
    camera.bottom = -frustumSize / 2;
  } else {
    camera.left = -frustumSize / 2;
    camera.right = frustumSize / 2;
    camera.top = (frustumSize * aspect) / 2;
    camera.bottom = (-frustumSize * aspect) / 2;
  }

  camera.updateProjectionMatrix();
}

目前，一切都按预期进行：对象根据其高度或宽度适合窗口。如果对象的高度超过窗口高度但仍符合最大宽度（反之亦然），则会出现问题，导致模型被裁剪。

我只需要让物体适合初始显示，之后用户可以自由地进行轨道控制

最大宽度

最大高度

最大宽度，但模型高度超过窗口/相机高度

我尝试手动设置

camera.zoom

，但即便如此，我也无法找出正确的值。之后，我的轨道控制器停止运行。

Answer 1

计算时应考虑特殊情况，即

connection

尺寸之比 (

frustumAspect

) 小于

window

尺寸之比 (

aspect

)。应缩放

frustumSize

以反映这种差异 (

frustumScaled

)。

可选地，

camera.left

和

camera.bottom

可以通过否定相反的属性来简化。

const frustumAspect = isPortrait ? (connection.width / connection.height) :
  (connection.height / connection.width);

const aspectScale = Math.max(frustumAspect / aspect, 1);
const frustumScaled = frustumSize * aspectScale;

//Front View
if (isPortrait) {
  camera.right = (frustumScaled * aspect) / 2;
  camera.top = frustumScaled / 2;
} else {
  camera.right = frustumScaled / 2;
  camera.top = (frustumScaled * aspect) / 2;
}
camera.left = -camera.right;
camera.bottom = -camera.top;