AFrame raycaster `objects` field not working for custom cursor primitive

Question

I'm trying to register a custom cursor primitive, however, the raycaster doesn't seem to detect objects with the clickable class

Here's my code:

AFRAME.registerPrimitive('a-animated-cursor', {
  defaultComponents: {
    raycaster: {
      objects: '.clickable',
    },
    cursor: {
      rayOrigin: 'mouse',
      fuseTimeout: '500',
    },
    geometry: {
      primitive: 'ring',
      radiusOuter: 0.016,
      radiusInner: 0.01,
      segmentsTheta: 32,
    },
    material: {
      color: 'white',
      shader: 'flat',
      opacity: 0.8,
    },
    position: {
      x: 0,
      y: 0,
      z: -1,
    },
    animation__click: {
      property: 'scale',
      startEvents: 'click',
      easing: 'easeInCubic',
      dur: 150,
      from: {
        x: 0.1,
        y: 0.1,
        z: 0.1,
      },
      to: {
        x: 1,
        y: 1,
        z: 1,
      },
    },
    animation__fusing: {
      property: 'scale',
      startEvents: 'fusing',
      easing: 'easeInCubic',
      dur: 1500,
      from: {
        x: 1,
        y: 1,
        z: 1,
      },
      to: {
        x: 0.1,
        y: 0.1,
        z: 0.1,
      },
    },
    animation__mouseleave: {
      property: 'scale',
      startEvents: 'mouseleave',
      easing: 'easeInCubic',
      dur: 500,
      to: {
        x: 1,
        y: 1,
        z: 1,
      },
    },
  },
});

And here's the working of the cursor, which isn't a primitive:

      <a-cursor
        id="cursor"
        color="white"
        rayOrigin="mouse"
        raycaster="objects: .clickable"
        fuseTimeout="500"
        animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
        animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
        animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
      ></a-cursor>

Answer 1

I think it's clicking, but the animation changes the "to" object, so it gets stuck. If you provide a string scale, it seems to be working:

const box = document.querySelector("a-box")
box.addEventListener("click", () => {
  // random color on click
  let hex = '#'+(Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0');
  box.setAttribute("color", hex)
})
    

<script src="https://aframe.io/releases/1.4.1/aframe.min.js"></script>
<script>
  AFRAME.registerPrimitive('a-animated-cursor', {
    defaultComponents: {
      cursor: {
        rayOrigin: 'entity',
        fuseTimeout: '500',
        fuse: true
      },
      raycaster: {
        objects: '.clickable',
      },
      geometry: {
        primitive: 'ring',
        radiusOuter: 0.016,
        radiusInner: 0.01,
        segmentsTheta: 32,
      },
      material: {
        color: 'black',
        shader: 'flat',
      },
      position: { x: 0, y: 0, z: -1 },
      animation__fusing: {
        property: 'scale',
        startEvents: 'fusing',
        easing: 'easeInCubic',
        dur: 500,
        from: "1 1 1",
        to: "0.1 0.1 0.1"
      },
      animation__click: {
      property: 'scale',
      startEvents: 'click',
      easing: 'easeInCubic',
      dur: 150,
      to: "1 1 1",
      from: "0.1 0.1 0.1"
    },
    animation__mouseleave: {
      property: 'scale',
      startEvents: 'mouseleave',
      easing: 'easeInCubic',
      dur: 500,
      to: "1 1 1"
    }
   },
  });
</script>

<a-scene>
  <a-camera>
    <a-animated-cursor></a-animated-cursor>
  </a-camera>
  <a-box class="clickable" position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
</a-scene>