一个框架。放大滚轮

Question

我浏览了官方文档，但无法找到有关缩放 in/out panorama 图像的可能性的信息，A-Frame 是否支持它，或者可能有阅读有关在其上实施某些 three.js 的解决方法？

Answer 1

您可以：

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

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

我认为缩放可能会搞砸你的设置，或者是一种资源浪费，所以我会选择 2。

Answer 2

这就是我放在一起做的。检查初始 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 3

这可能是 2018 年更简洁的方式。我将 Aframe 相机的变焦限制在 1-5 之间，这样它就不会变得太远 messy.I 刚刚测试了它及其工作 greatly.Hope 它可以帮助其他人。

window.addEventListener("mousewheel", 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 4

Sandy 的回答对我很有帮助。我想贡献一个显示完整代码并启用更平滑缩放（增量为 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>

Answer 5

为了使它适用于嵌入式 a 帧，我费了很大劲，尤其是因为在动态调整相机的缩放设置时场景会变得倾斜。这是一个框架的错误。这是我发现的两种在设置缩放级别时重置场景的方法。

AFRAME.scenes[0].resize();

或者...

let scene = document.querySelector('a-scene');
scene.camera.aspect = scene.clientWidth / scene.clientHeight;
scene.camera.updateProjectionMatrix();

一个框架。放大滚轮

A-Frame. Zoom on wheel scroll

aframe