javascript - 如何缩放 A 框 Videosphere

Question

我没有找到任何放大视频圈的方法。尝试更改半径，但它不起作用。我想根据鼠标滚轮 Action 进行缩放。

    <a-scene id="vr-scene" canvas="canvas: #vr-canvas">
    <canvas class="vr-canvas"></canvas>
    <a-assets timeout="500">

        <video id="player" src="" autoplay="true" controls="false" webkit-playsinline ></video>                
    </a-assets>
    <a-videosphere id="video" src="#player" rotation="0 90 0">
    </a-videosphere>

</a-scene>

Answer 1

您可以通过创建一个控制相机 fov(即变焦)的自定义组件来实现此目的。

 AFRAME.registerComponent('zoom-controls', {
      schema:{
        min:{type:"number", default: 5},
        max: {type:"number", default: 120}
      },
      init: function(){
          let self = this;
          let sceneEl = document.querySelector("a-scene");          
          self.camera = sceneEl.querySelector("#camera");
        console.log('min: ', self.data.min);
        console.log('max: ', self.data.max);
          window.addEventListener("wheel", event =>{
              let amount = Math.sign(event.deltaY)*5 ;              
              let fov = Number(self.camera.getAttribute('camera').fov);
              let adjust = amount + fov;      
              if(adjust < self.data.min) {adjust = self.data.min;}
              if (adjust > self.data.max) {adjust = self.data.max;}
            console.log('zoom: ', adjust);
              self.camera.setAttribute('camera', 'fov', adjust);
          }); 
      }  
    });

    <a-entity id="camera" camera="active: true" look-controls zoom-controls="min:5; max: 140" fov="100" position="0 0 0"></a-entity>    

glitch here