Aframe 人字架。滚轮滚动缩放

我查阅了官方文档，但找不到有关放大/缩小

全景图像的可能性的信息，它在A框架中是否受支持，或者是否有一个解决方案可以阅读关于在其上实现
three.js
的一些内容？
您可以：

缩放

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

我认为扩展可能会破坏您的设置，或者是一种资源浪费，所以我选择2。
这就是我所做的。检查初始vrZoom变量

对我来说，我最困难的是理解如何设置组件内部的参数。您必须这样调用它：
element.setAttribute（'componentName'，'parameterName'，'value'）
在我的例子中，
cam.setAttribute（'camera'，'zoom'，vrZoom）

这是我的剧本。可以使用它创建组件，例如外观控件

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

在2018年，这可能是一种更干净的方式。
我限制了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);
  });

window.addEventListener（“控制盘”，事件=>{
常数δ=数学符号（事件δ）；
//获取鼠标滚轮更改（120或-120并将其规格化为1或-1）
var mycam=document.getElementById（'cam'）.getAttribute（'camera'）；
var finalZoom=document.getElementById（'cam'）.getAttribute（'camera'）.zoom+delta；
//限制缩放，使其不会放大或缩小太多
如果（最终Zoom5）
最终缩放=5；
mycam.zoom=finalZoom；
//设置摄影机元素
document.getElementById（'cam'）.setAttribute（'camera'，mycam）；
});
桑迪的回答帮助了我。我想提供一个答案，显示完整的代码，并支持更平滑的缩放（增量为0.1）：


window.addEventListener（“控制盘”，（事件）=>{
//小增量可实现更平滑的缩放
const delta=event.wheeldta/120/10；
var mycam=document.getElementById（“cam”）.getAttribute（“摄影机”）；
var finalZoom=
document.getElementById（“cam”）.getAttribute（“摄影机”）.zoom+delta；
//限制缩放
如果（最终缩放<0.5）最终缩放=0.5；
如果（最终缩放>2）最终缩放=2；
mycam.zoom=最终缩放；
document.getElementById（“cam”）.setAttribute（“摄影机”，mycam）；
});
对于嵌入式a帧，我很难做到这一点，特别是在动态调整相机的缩放设置时，场景会变得倾斜。这是一个带有a型框架的bug。下面是我在设置缩放级别时重置场景的两种方法

AFRAME.scenes[0].resize();

或者

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

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