Как запустить событие столкновения A-FRAME, когда два прямоугольника пересекаются друг с другом?

Я пытаюсь обнаружить столкновение двух ящиков в A-FRAME v. 0.5.0. Я использую пример raycaster: https://aframe.io/docs/0.5.0/components/raycaster.html#whitelisting-entities-to-test-for-intersection

но для меня это работает только с курсором, пересекающим одну из сеток. Как написано, Raycaster определяет, когда линия, созданная из начальной точки в определенном направлении, пересекает желаемую сетку (здесь отмечена коллидируемым классом). Похоже, что начало этой линии обнаружения столкновений каким-то образом установлено на камере или на курсоре, но не на одном из полей. Как переназначить эту отправную точку?

Перед инициализацией сцены я добавил компонент:

AFRAME.registerComponent('collider-check', {
dependencies: ['raycaster'],
init: function () {
    console.log("we have component");
this.el.addEventListener('raycaster-intersected', function () {
    console.log('Player hit something!');
});
},
});

а затем объекты A-FRAME

    <a-entity id="player" collider-check >
      <a-entity id="rc" 
        raycaster="objects: .collidable" 
        geometry="primitive: box; width: 0.5; height: 4; depth: 0.5" 
        material="shader: flat; color:gray" 
        position="0 -0.9 0" 
        rotation="90 0 0" ></a-entity>
    </a-entity>

    <a-entity id="inmotion" class="collidable" 
        geometry="primitive: box; width: 0.5; height: 4; depth: 0.5" 
        position="1 0 0"
        material="shader: flat; color: #00CCDD">
        <a-animation id="canim"
          attribute="position" 
            dur="2000"
            from ="-2 -1 0"
            to="2 0 0.5"
            fill="forwards"
            direction="alternate"
            repeat="indefinite">

        </a-animation>
    </a-entity>

Вот пример jsfiddle; https://jsfiddle.net/Suiseki/9ggs6x4m/2/