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

Question

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

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

The a-frame raycaster docs 说 raycaster 相交事件的详细信息 "will contain el, the raycasting entity, and intersection, an object containing detailed data about the intersection." 我如何访问这些？我尝试了下面的方法并得到了一个错误 "Uncaught TypeError: Cannot read property 'setAttribute' of undefined"

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

Answer 1

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

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

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

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

In A-Frame how do I change an entity's attributes from a raycaster intersection event?

javascript

webvr

aframe