R3F中CameraControls适配不同宽高比对象与屏幕的自动取景问题

项目背景 #

• 技术栈：React Three Fiber、Three.js、@react-three/drei
• 场景：环形3D纪念碑，四周均匀挂载4个固定宽高比的对象：镜子（1:1.5）、ATM机（2:1）、雕像、球体

交互需求 #

点击对象（如ATM机）时，通过CameraControls.setLookAt()将相机缩放至该对象，同时在对象网格上叠加对应宽高比的HTML iframe，要求：

• iframe在任意屏幕（宽屏/竖屏手机）上尽可能填满屏幕且不被裁剪
• 相机动态调整规则：
  • 横屏时匹配对象高度
  • 竖屏时匹配对象宽度
  • 介于两者之间时动态适配

当前问题 #

缩放后，部分屏幕（竖屏/1:1屏幕）下iframe被裁剪，其余屏幕存在过多留白，无法完美适配视口。

已尝试方案及问题 #

1. 手动适配：测量网格屏幕空间尺寸，对比窗口尺寸调整相机距离
   • 问题：出现抖动，跨设备适配效果不一致
2. 使用@react-three/drei的<AutoFraming>组件：将网格包裹在组件内
   • 问题：网格延迟挂载（几帧后才显示）导致崩溃，报错Cannot read properties of undefined (reading 'copy')
3. 混合方案：仅在网格加载完成后挂载<AutoFraming>
   • 问题：崩溃减少，但适配效果仍不一致

核心目标 #

找到可靠的自动取景方法，满足：

• 不同宽高比的对象对应的HTML内容在所有屏幕尺寸/方向下均填满屏幕且不被裁剪
• 兼容网格轻微延迟加载的情况

上下文信息 #

• 相机控制器：CameraControls（非OrbitControls）
• 对象加载特性：网格在着色器加载完成后才显示

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