Question

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

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

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

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交叉事件中更改实体的属性？

2 个答案: