Как увеличить А-кадр Видеосфера - PullRequest
Новая
       90

Как увеличить А-кадр Видеосфера

0 голосов
/ 07 ноября 2019

Я не нашел способа увеличить масштаб до -видосферы. Пытался изменить радиус, но он просто не работает. Я хочу увеличить масштаб на основе действия колеса прокрутки мыши. 

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

1 Ответ

2 голосов
/ 07 ноября 2019

Вы можете сделать это, сделав пользовательский компонент, который управляет полем зрения (т.е. увеличением) камеры. 

 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>

сбой здесь

...