使用A-Frame显示安卓拍摄全景图变形，如何调整参数修正？

安卓相机拍摄的全景图参数为11568 x 1696像素、72 dpi，但使用以下A-Frame代码加载时出现画面变形：人物显得过高，原本腰高的桌子看起来像在地面上。请提供可调整的参数来优化比例与视线效果。

<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script>
    window.addEventListener("wheel", (event) => {
      const delta = event.wheelDelta / 120 / 10;
      var mycam = document.getElementById("cam").getAttribute("camera");
      var finalZoom =
        document.getElementById("cam").getAttribute("camera").zoom + delta;

      // limiting the zoom
      if (finalZoom < 0.5) finalZoom = 0.5;
      if (finalZoom > 2) finalZoom = 2;
      mycam.zoom = finalZoom;

      document.getElementById("cam").setAttribute("camera", mycam);
    });
  </script>
  <a-scene>
    <a-entity
      id="cam"
      camera="zoom: 1"
      look-controls="reverseMouseDrag: true"
    ></a-entity>
    <a-assets>
      <img id="skyTexture" crossorigin="anonymous" src="panorama.jpg" />
      
    </a-assets>
    <a-sky src="#skyTexture"></a-sky>
  </a-scene>

显示变形效果 #

原始全景图 #

变形核心原因是A-Frame默认的全景映射模式、相机参数与你的图片宽高比不匹配，以下是具体调整方法：

1. 修正<a-sky>的缩放比例 #

你的图片宽高比约为6.82:1，远大于标准球形全景的2:1比例，默认球形映射会过度拉伸垂直方向。通过scale属性压缩垂直维度，匹配图片真实比例：

<a-sky src="#skyTexture" scale="1 0.32 1"></a-sky>

注：0.32是根据图片宽高比计算的近似值，可在0.3-0.35之间微调以达到最佳视觉效果

2. 调整相机参数还原真实视角 #

• 设置相机初始高度为真实人眼高度（约1.5米），让场景物体比例符合现实感知
• 缩小相机垂直视野（fov），减少垂直方向的拉伸变形

修改后的相机实体代码：

<a-entity
  id="cam"
  camera="zoom: 1; fov: 60"
  look-controls="reverseMouseDrag: true"
  position="0 1.5 0"
></a-entity>

3. 优化滚轮缩放逻辑（可选） #

原代码可简化为直接修改相机zoom属性，无需重新获取整个camera对象：

window.addEventListener("wheel", (event) => {
  const delta = event.wheelDelta / 120 / 10;
  const camEl = document.getElementById("cam");
  let finalZoom = camEl.getAttribute("camera").zoom + delta;
  finalZoom = Math.max(0.5, Math.min(2, finalZoom));
  camEl.setAttribute("camera", "zoom", finalZoom);
});

完整优化后代码示例 #

<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
<script>
    window.addEventListener("wheel", (event) => {
      const delta = event.wheelDelta / 120 / 10;
      const camEl = document.getElementById("cam");
      let finalZoom = camEl.getAttribute("camera").zoom + delta;
      finalZoom = Math.max(0.5, Math.min(2, finalZoom));
      camEl.setAttribute("camera", "zoom", finalZoom);
    });
  </script>
  <a-scene>
    <a-entity
      id="cam"
      camera="zoom: 1; fov: 60"
      look-controls="reverseMouseDrag: true"
      position="0 1.5 0"
    ></a-entity>
    <a-assets>
      <img id="skyTexture" crossorigin="anonymous" src="panorama.jpg" />
      
    </a-assets>
    <a-sky src="#skyTexture" scale="1 0.32 1"></a-sky>
  </a-scene>

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