Click event on a-entity in ar.js

问题

I have a simple code where there is a plane over barcode marker, when I click on this plane this action toggle visibility to another entity.

<!doctype HTML>
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<script src="https://unpkg.com/aframe-curve-component/dist/aframe-curve-component.min.js"></script>
</head>
<body style='margin : 0px; overflow: hidden;'>
<script>
    AFRAME.registerComponent("markerhandler", {
        init: function () {
            const animatedMarker = document.querySelector("#animated-marker");
            var toggle= false;
            animatedMarker.addEventListener('click', function (ev, target) {
                console.log('click event on #animated-marker fired')
                toggle=-toggle;
                const element = document.querySelector("#show-hide-entity");
                element.setAttribute('visible',toggle);
            })
        }
    })
</script>
<a-scene embedded
         arjs='sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix;  matrixCodeType: 4x4_BCH_13_9_3;'>



    <a-marker type='barcode' value='1' emitevents="true" markerhandler>
        <a-entity cursor="rayOrigin: mouse" raycaster="objects: .clickable; useWorldCoordinates: true;"></a-entity>
        <a-entity geometry="primitive: plane; width: 1; height: 1"
                  material="color: red;  opacity:0.7; side: double"
                  text="value: click me; align: center; wrapCount: 15"
                  position="0 0 0"
                  rotation="-90 0 0" class="clickable"
                  id="animated-marker"></a-entity>
        <a-entity geometry="primitive: plane; width: 1; height: 1"
                  material="color: blue;  opacity:0.7; side: double"
                  text="value: All it's ok; align: center; wrapCount: 15"
                  position="1 0 0"
                  rotation="-90 0 0"
                  id="show-hide-entity" visible="false"></a-entity>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body
</html>

But click event isn't fired.

Used references and documentation:

How to handle click events on AR.js
Event listeners in ar.js
OnClick on model in AFrame-AR.js scene

来源：https://stackoverflow.com/questions/63151052/click-event-on-a-entity-in-ar-js

标签

augmented-reality

aframe

ar.js