在 A-Frame 中，如何从 raycaster 相交事件中更改实体的属性？答案

【问题标题】：In A-Frame how do I change an entity's attributes from a raycaster intersection event?在 A-Frame 中，如何从 raycaster 相交事件中更改实体的属性？
【发布时间】：2016-10-18 14:23:22
【问题描述】：

我已使用Mozilla's A-Frame 将光线投射器附加到 vive 控制器实体。我希望一些相交的对象在相交时改变不透明度。这些对象在不相交时应该是不可见的（0 不透明度），而在相交时应该是 0.5 不透明度。

我设法创建了一个组件，该组件在 raycaster-intersected 事件时触发一个函数。但是，我很难弄清楚如何从此函数更改相交对象的属性。

The a-frame raycaster docs 表示 raycaster-intersected 事件详细信息“将包含 el（光线投射实体）和 intersection（包含有关交叉点的详细数据的对象）。”我如何访问这些？我尝试了以下并得到一个错误“未捕获的类型错误：无法读取未定义的属性'setAttribute'”

AFRAME.registerComponent('grid-cube-collider', {
  dependencies: ['raycaster'],
  init: function () {
    this.el.addEventListener('raycaster-intersected', function () {
            this.el.setAttribute('material', 'opacity', '0.5');
    });
  }
});

【问题讨论】：

标签： javascript aframe webvr

【解决方案1】：

this.el 指的是您的光线投射器实体，而不是目标实体。目标实体包含在事件详细信息中，通过事件处理程序回调传递。试试：

this.el.addEventListener('raycaster-intersected', function (evt) {
        evt.detail.el.setAttribute('material', 'opacity', '0.5');
});

【讨论】：

这行得通。现在我遇到了似乎相关的性能问题，但至少我正在迎接下一个挑战：P

【解决方案2】：

另请参阅https://github.com/bryik/aframe-vive-cursor-component 以获得类似的解决方案。

<script src="https://unpkg.com/aframe-vive-cursor-component/dist/aframe-vive-cursor-component.min.js></script>
<a-entity vive-controls="hand: left" vive-cursor></a-entity>

【讨论】：