为什么a-frame点击事件不起作用?

时间:2017-02-24 20:41:44

标签: aframe webvr

我试图找出为什么我的控制台没有在我的点击事件处理程序中记录我的日志语句。任何帮助将不胜感激。

这是我的JS小提琴。 https://jsfiddle.net/tznezkqo/

我正在使用A-Frame 5.0版

这是我的HTML

 <!-- Player -->
  <a-entity camera universal-controls="movementControls: checkpoint" checkpoint-controls="mode: animate"
            position="0 1.764 0">
    <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1"
              geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;" material="color: #CCC; shader: flat;">
    </a-entity>
  </a-entity>


  <a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue" position="-2 2.2 -1.5"></a-entity>

和我的JS

$(document).ready(function() {

  AFRAME.registerComponent('cursor-listener', {
    init: function () {
      this.el.addEventListener('click', function (evt) {
        console.log('I was clicked at: ', evt.detail.intersection.point);
      });
    }
  });

  AFRAME.registerComponent('collider-check', {
    dependencies: ['raycaster'],
    init: function () {
      this.el.addEventListener('raycaster-intersected', function () {
        console.log('Player hit something!');
      });
    }
  });

});

1 个答案:

答案 0 :(得分:3)

我相信在使用元素之前,您必须确保该组件已注册

这是您示例的修改版本:https://jsfiddle.net/pj3m4obt/2/

<script>
AFRAME.registerComponent('cursor-listener', {
    init: function () {
         this.el.addEventListener('click', function (evt) {
        console.log('I was clicked at: ', evt.detail.intersection.point);
      });
    }
  });
</script>
<body>
...
<a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue" position="-2 2.2 -1.5"></a-entity>