AFRAME - disable cursor gaze on specific elements

Question

I'm using the following code for visual feedback:

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
  <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1" geometry="primitive: ring" material="color: black; shader: flat">
    <a-animation begin="click" easing="ease-in" attribute="scale" fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
    <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale" fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
  </a-entity>
</a-scene>

The problem is that this code is applied where the cursor "collide" with every primitive entity in the scene. I want it to be apply only on specific elements. (or alternatively, disable the animations on specific elements). How can I do it?

Thanks

Shane Shane · Accepted Answer · 2017-05-15T11:46:42

The cursor component depends on the raycaster component. If the raycaster component is not added as an attribute of the DOM element, the cursor component will initialize one with default settings. However when provided, you can alter certain attribute values of the raycaster component to satisfy your needs.

Luckily for you, the raycaster component supports specific entities with a DOM query selector.

<a-entity cursor raycaster="objects: .clickable"></a-entity>

This will make the cursor only emit events to <a-entity>s with the class name of clickable.

Here is a link to all the raycaster component properties: raycaster component properties.

AFRAME - disable cursor gaze on specific elements

1 Answers