Проверять пересечение raycaster только один раз при каждом нажатии кнопки в кадре - PullRequest
Новая
       3

Проверять пересечение raycaster только один раз при каждом нажатии кнопки в кадре

0 голосов
/ 13 ноября 2018

У меня есть кнопка съемки на экране. 

<div style="text-align:center;height: 50px;" >
      <button id="shootbutton" style="float: right;height: 50px;width: 100px;font-size : 19px;background-color:red;">SHOOT</button>
    </div>

И объект игрока. 

 <a-entity id="player" 
            raycaster 
            raycast-score 
            raycast-death 
            networked="template:#avatar-template;showLocalTemplate:false;" 
            camera spawn-in-circle="radius:3;" 
            position="0 1.3 0" 
            wasd-controls 
            look-controls 
            touch-move-controls 
            twoway-motion="speed: 35"
            >
  </a-entity>

Я бы хотел, чтобы raycaster проверял пересечения только один раз каждый раз, когдакнопка съемки нажата. 

<script>
    var score = 0;

    AFRAME.registerComponent('raycast-score', {
      init: function() {
        var that = this;
        document.getElementById("shootbutton").onclick = function(e){
            that.shoot();
        }
      },


      shoot: function() {
        function evt () {
          score++ ;
          console.log("Score: " + score)

    }
          this.el.addEventListener('raycaster-intersection', evt)
          this.el.removeEventListener('raycaster-intersection', evt)
      },
    });


  </script>

Ответы [ 2 ]

0 голосов
/ 17 ноября 2018

Вы можете отключить raycaster (может быть, только на master? Я забыл), чтобы он не работал на каждом кадре или интервале: 

el.setAttribute('raycaster', 'enabled', false);

Затем проверьте на пересечение вручную после нажатия. rayOrigin: mouse одним касанием переместит луч заклинателя соответствующим образом, после чего вы можете проверить. 

// Manually check intersection.
el.components.raycaster.checkIntersections();
0 голосов
/ 13 ноября 2018

Если вы хотите знать только, есть ли какое-либо пересечение

Используйте прослушиватели событий для хранения информации о том, пересекается ли ваш луч или нет, и проверьте ее в пределах shoot()функция: 

...
init: function() {
  this.isIntersecting = false
  this.el.addEventListener("raycaster-intersection", (e) => {
    this.isIntersecting = true
  }
  this.el.addEventListener("raycaster-intersection-cleared", (e) => {
    this.isIntersecting = false
  }
},
shoot: function() {
  if (this.isIntersecting) {
     // the raycaster is intersecting 
  }
...

Если вы хотите детализировать, с какой сущностью вы пересекаетесь:

Вы можете проверить, с какими элементами пересекает raycaster с помощью intersectedElsсвойство компонента: 

rayEl.components['raycaster'].intersectedEls

Когда вы нажмете на кнопку, вы сможете оттуда выбрать объекты.

shoot: function() {
  // do something with this.el.components['raycaster'].intersectedEls
}

Fiddle здесь .

Если вы хотите, чтобы объект raycaster активно проверял пересечения только при щелчке, вы можете установить raycasters enabledсвойство true только тогда, когда вам это нужно.Хотя raycaster нужно время, отсюда и мое время ожидания. 

shoot() {
   ray.setAttribute("raycaster", "enabled", "true")
   setTimeout((e)=> {
     console.log(ray.components['raycaster'].intersectedEls)
     ray.setAttribute("raycaster", "enabled", "false")
   }, 500)
}

Fiddle здесь .

...