Question

我有一个屏幕上的拍摄按钮。

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

我希望光线投射器每次按下拍摄按钮时只检查一次交叉点。

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

Answer 1

如果您只想知道是否有十字路口

使用事件侦听器存储是否与射线相交的信息，并在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 
  }
...

如果要详细说明与哪个实体相交：

您可以检查光线投射器与组件的intersectedEls属性相交的元素：

rayEl.components['raycaster'].intersectedEls

单击按钮时，您可以从那里获取实体。

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

提琴here。

如果要让raycaster实体仅在单击时主动检查相交，则可以仅在需要时将raycasters enabled属性设置为true。尽管光线投射器需要一段时间，但我的超时时间还是很长。

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

提琴here。

Answer 2

您可以禁用raycaster（也许只在master上吗？我忘记了），这样它就不会在每个帧或间隔上运行：

     books.forEach(b => {
        const btn = document.createElement('input')
        btn.type = 'checkbox'
        btn.setAttribute("id",b.title)
        perhiscontainer.appendChild(btn)
    })


    var checkBox = document.getElementById(id);

然后在点击后手动检查交叉点。轻触el.setAttribute('raycaster', 'enabled', false);将使光线投射器适当移动，然后您可以进行检查。

rayOrigin: mouse

在框架中单击每个按钮时，仅检查一次raycaster相交一次

2 个答案: