CODEWITHSUNDEEP
javascriptaframewebvr
Kieran F.
Kieran F.

Reputation: 555

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

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');
    });
  }
});

Upvotes: 2

Views: 1088

Answers (2)

Diego Marcos
Diego Marcos

Reputation: 4585

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');
});

Upvotes: 3

ngokevin
ngokevin

Reputation: 13233

Also see https://github.com/bryik/aframe-vive-cursor-component for a similar solution.

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

Upvotes: 1

Related Questions