I’m trying to handle click events on AR.js refer to below page.
https://medium.com/chialab-open-source/how-to-handle-click-events-on-ar-js-58fcacb77c4
But if phone in portrait mode, there's an issue like below image.
https://i.stack.imgur.com/3PuXY.jpg
<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/0.8.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/AR.js/master/aframe/build/aframe-ar.min.js"></script>
<script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
<body style="margin : 0px; overflow: hidden;">
<a-scene embedded vr-mode-ui="enabled: false" arjs="sourceType: webcam; trackingMethod: best; debugUIEnabled: false;">
<a-assets>
<a-asset-item id="animated-asset" src="https://raw.githubusercontent.com/nicolocarpignoli/nicolocarpignoli.github.io/master/ar-playground/models/CesiumMan.gltf"></a-asset-item>
</a-assets>
<a-marker markerhandler preset="hiro" emitevents="true" cursor="fuse: false; rayOrigin: mouse" id="animated-marker">
<a-entity position="0 0 1">
<a-entity
id="animated-model"
gltf-model="#animated-asset"
scale="3"
position="-3 0 0"
rotation="-90 0 0">
</a-entity>
</a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
<script>
AFRAME.registerComponent('markerhandler', {
init: function() {
const animatedMarker = document.querySelector("#animated-marker");
const aEntity = document.querySelector("#animated-model");
animatedMarker.addEventListener('click', function(ev, target){
const intersectedElement = ev && ev.detail && ev.detail.intersectedEl;
if (aEntity && intersectedElement === aEntity) {
alert("test");
}
});
}
});
</script>
</body>
How to fix that?
