Three/Aframe中计算相机缩放值实现图像适配屏幕的问题求解

你当前代码的核心偏差有两处：

1. 计算相机视锥水平宽度时错用了资产宽高比，实际透视相机的视锥水平覆盖范围，仅由垂直FOV、固定拍摄距离、屏幕实际宽高比共同决定，和资产本身比例无关
2. 对Three.js/A-Frame的zoom参数的逻辑关系搞反了：zoom值和视锥覆盖的空间范围成反比——zoom越大，视锥能装下的东西越少，物体在画面里显得越大；zoom越小，视锥覆盖范围越大，物体显得越小。之前参考的“调整相机距离实现适配”的方案，本质就是通过改变视锥大小来匹配物体尺寸，这个逻辑完全可以直接映射到zoom值上，不需要重新推导距离公式。

首先明确固定前提：你的图像平面在3D场景中的摆放距离、实际空间尺寸是固定不变的，只需要通过调整相机zoom值，让视锥范围刚好匹配图像的外轮廓，做到无裁切完全适配屏幕。

1. 计算默认zoom=1状态下，相机当前视锥能覆盖的实际空间范围
   • 垂直方向覆盖高度：defaultViewHeight = 2 * Math.tan(vFOV/2) * 相机到图像的固定距离
   • 水平方向覆盖宽度：defaultViewWidth = defaultViewHeight * 屏幕实际宽高比（window.innerWidth / window.innerHeight）
2. 根据你的适配规则判断需要匹配的视锥边
   • 如果图像本身的宽高比 > 屏幕宽高比（属于横版/更宽的画面）：需要让视锥水平宽度刚好等于图像的实际空间宽度，做到撑满屏幕宽度无左右裁切
   • 如果图像本身的宽高比 < 屏幕宽高比（属于竖版/更高的画面）：需要让视锥垂直高度刚好等于图像的实际空间高度，做到撑满屏幕高度无上下裁切
3. 换算得到目标zoom值
   • 横版适配场景：targetZoom = 默认状态下的水平视锥宽度 / 图像实际空间宽度
   • 竖版适配场景：targetZoom = 默认状态下的垂直视锥高度 / 图像实际空间高度

const cameraEl = document.getElementById('camera')
const cameraConfig = cameraEl.getAttribute('camera')
const vFOV = THREE.Math.degToRad(cameraConfig.fov || 80)
const fixedDistance = this.data.distance
// 注意：这里的宽高是图像平面在3D场景中的实际世界尺寸，不是图片像素值
const assetWorldWidth = this._assetWidth
const assetWorldHeight = this._assetHeight
// 实时获取屏幕实际宽高比
const screenRatio = window.innerWidth / window.innerHeight

// 计算默认zoom=1下的视锥覆盖范围
const defaultViewHeight = 2 * Math.tan(vFOV / 2) * fixedDistance
const defaultViewWidth = defaultViewHeight * screenRatio

// 计算目标zoom
let targetZoom
const assetRatio = assetWorldWidth / assetWorldHeight
if (assetRatio > screenRatio) {
  // 宽幅资产：适配屏幕宽度
  targetZoom = defaultViewWidth / assetWorldWidth
} else {
  // 竖幅资产：适配屏幕高度
  targetZoom = defaultViewHeight / assetWorldHeight
}

// 赋值更新相机
cameraEl.setAttribute('camera', 'zoom', targetZoom)

• 不要把图片的像素宽高直接当成场景中的世界尺寸使用，必须确保你创建的平面图像网格的宽高，和传入的assetWorldWidth/assetWorldHeight完全匹配，否则计算出来的zoom值会出现比例错位
• 窗口尺寸变化、屏幕旋转时需要重新执行一遍上述计算逻辑，避免适配结果随窗口变形错位
• A-Frame的camera组件会在更新zoom属性时自动重新计算投影矩阵，不需要手动调用Three.js的updateProjectionMatrix方法

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