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

Question

I've attached a raycaster to a vive controller entity using Mozilla's A-Frame. I'd like some intersected objects to change opacity while they're being intersected. These objects should be invisible (0 opacity) while not intersected and 0.5 opacity while intersected.

I managed to create a component that triggers a function upon the raycaster-intersected event. However, I'm having a hard time trying to figure out how to change the intersected object's attribute from this function.

The a-frame raycaster docs says raycaster-intersected event detail "will contain el, the raycasting entity, and intersection, an object containing detailed data about the intersection." How do I access those? I tried the below and got an error "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');
    });
  }
});

Diego Marcos Diego Marcos · Accepted Answer · 2016-10-15T06:22:12

this.el is referring to your raycaster entity, not the target entity. The target entity is contained within the event detail, passed in through the event handler callback. Try:

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

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

2 Answers