单击处理程序不适用于框架原始几何对象

【问题标题】：Click handler not working on aframe primitive geomerty objects单击处理程序不适用于框架原始几何对象
【发布时间】：2019-01-08 23:29:27
【问题描述】：

我已经在 aframe 的原始几何上添加了点击处理程序，如下所示：

<a-scene>
  <a-sphere id="ball" cursor-listener material="color: red" position="-3 3 -5" onclick="showplane('#box1')" >
  </a-sphere>
</a-scene>

我想在点击球体时为平面几何图形设置动画，当平面对用户可见时，我需要为平面附加一个点击处理程序。

JS 小提琴：https://jsfiddle.net/bhupi1011/9ptLqa32/

单击处理程序在不处理任何一个几何图形时..

谢谢。

【问题讨论】：

标签： javascript aframe webvr

【解决方案1】：

您必须将cursor 添加到场景中。对于鼠标单击，您可以执行以下操作：

<a-scene cursor="rayOrigin: mouse">

使用组件处理点击事件：

AFRAME.registerComponent('select', {
  init: function () {
    var originalColor = this.el.getAttribute('material').color;
    var self = this;
    this.el.sceneEl.addEventListener('click', function (evt) {
      var color;
      if (evt.detail.intersectedEl === undefined) { return; }
      var color = evt.detail.intersectedEl === self.el ? 'green' : originalColor;
      self.el.setAttribute('color', color);
    }, false);
  }
});

演示：https://jungle-plate.glitch.me/

代码：https://glitch.com/edit/#!/jungle-plate?path=select.js:12:3

【讨论】：