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