使用A框显示Android手机拍摄的全景图像

问题描述 投票:0回答:1

全景照片是 Android 相机选项中的一个选项。该过程很简单,生成 72 dpi 时 11568 x 1696 像素的图像。

但是,当使用下面的代码将该图像显示在框架中时,我看到一个扭曲的图像,其中的人看起来非常高,齐腰高度的桌子看起来就像在地板上。

是否可以添加参数来调整比例/眼线?

<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>

我可以添加选项(参数)来调整比例以使其看起来更好吗?

what it looks like

原图: original image

css aframe panoramas
1个回答
0
投票

有可用的缩放选项。对于作为示例提供的图像,您可以通过添加如下代码来改变 x-y-z 缩放:

<a-entity scale="0.25 1 2">

所以上面的代码应该改为...

<a-entity 
   scale="0.25 1 2"
   id="cam"
   camera="zoom: 1"
   look-controls="reverseMouseDrag: true"
 ></a-entity>
© www.soinside.com 2019 - 2024. All rights reserved.