Question

我已经通过官方文档，但无法找到有关放大/缩小panorama图像的可能性的信息，是否支持A-Frame，或者可能有解决方法可供阅读关于在其上实现一些three.js？

Answer 1

你可以：

检测到鼠标滚轮事件时向上或向下缩放<a-sphere>
放大或缩小相机，如记录here

This article可能会有所帮助，因为它涵盖了在多个浏览器上使用鼠标滚轮事件。

我认为扩展可能会搞砸你的设置，或者造成资源浪费，所以我选择2。

Answer 2

这可能是2018年的一种更清洁的方法。我限制了Aframe相机1-5的变焦，所以它不会太混乱。我刚刚对其进行了测试，并且效果很好。希望它对其他人有帮助。

window.addEventListener("wheel", event => {
    const delta = Math.sign(event.wheelDelta);
    //getting the mouse wheel change (120 or -120 and normalizing it to 1 or -1)
    var mycam=document.getElementById('cam').getAttribute('camera');
    var finalZoom=document.getElementById('cam').getAttribute('camera').zoom+delta;
    //limiting the zoom so it doesnt zoom too much in or out
    if(finalZoom<1)
      finalZoom=1;
    if(finalZoom>5)
      finalZoom=5;  

    mycam.zoom=finalZoom;
    //setting the camera element
    document.getElementById('cam').setAttribute('camera',mycam);
  });

Answer 3

这是我一起做的事情。检查初始的vrZoom变量。

对我而言，我最挣扎的是理解你在组件中设置参数的方式。您必须这样称呼它：element.setAttribute('componentName', 'parameterName', 'value')，在我的情况下cam.setAttribute('camera', 'zoom', vrZoom)

这是我的剧本。可以用这个创建一个组件，例如look-controls。

var mousewheelevt=(/Firefox/i.test(navigator.userAgent))? "DOMMouseScroll" : "mousewheel";

if (document.attachEvent)
  document.attachEvent("on"+mousewheelevt, function(e){scroller(e)});
else if (document.addEventListener)
  document.addEventListener(mousewheelevt, function(e){scroller(e)},false);

var vrZoom = 4; // My initial zoom after animation
var cam = document.querySelector('#mainCam');

function scroller(evt)
{
  //Guess the delta.
  var delta = 0;
  if (!evt) evt = window.event;
  if (evt.wheelDelta) {
    delta = evt.wheelDelta/120;
  } else if (evt.detail) {
    delta = -evt.detail/3;
  }
  if (evt.preventDefault) evt.preventDefault();
  evt.returnValue = false;

  //Actual Zooming.
  vrZoom += delta * 0.1
  vrZoom = Math.min(Math.max(vrZoom, 1), 8); // clamp between 1 and 8
  cam.setAttribute('camera', 'zoom', vrZoom)
}

Answer 4

桑迪的回答帮助了我。我想提供一个显示完整代码并可以实现平滑缩放（增量为0.1）的答案：

<script>
  window.addEventListener("wheel", (event) => {
    // small increments for smoother zooming
    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>
  <!-- my pano image stuff -->
  <a-assets>
    <img id="skyTexture" crossorigin="anonymous" />
  </a-assets>
  <a-sky src="#skyTexture"></a-sky>
</a-scene>

一个框架。放大滚轮滚动

4 个答案: