search

jeromeetienne / AR.js

Efficient Augmented Reality for the Web - 60fps on mobile!
MIT License
15.79k stars 2.22k forks source link

Multiple requests when using several markers. #435

Closed RamanHaivaronski closed 5 years ago

RamanHaivaronski commented 5 years ago

There is problem with mutiple markers and their onClick implementation. Having more than one marker results into sending several identical requests (amount of requests = amount of markers), even though I clicked only on the single model and the ids' are different. 

<script src="https://aframe.io/releases/0.8.2/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>

<link rel="stylesheet" type="text/css" href="./style.css">
<body style='margin : 0px; overflow: hidden;'>
<div id="app"></div>
<script src="./bundle.js"></script>

<script>  
    AFRAME.registerComponent('click-handler', {
        schema: {default: 'not assigned'},
        init: function () {
            const id = this.data;
            const animatedMarker = document.querySelector(`#marker_${id}`);
            const aEntity = document.querySelector(`#quest_${id}`);

            animatedMarker.addEventListener('click', function (ev, target) {
                const intersectedElement = ev && ev.detail && ev.detail.intersectedEl;
                if (aEntity && intersectedElement === aEntity) {
                    window.store.dispatch(window.actions.fetchQuest(id))
                }
            });
        }
    });
</script>

<a-scene embedded
         arjs='sourceType: webcam; debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3'>

    <a-assets>
        <a-asset-item id="znak-model" src="./model/znak.gltf"></a-asset-item>
    </a-assets>

    <a-marker id="marker_1"
              cursor="fuse: false; rayOrigin: mouse"
              type='pattern'
              url='./markers/1-pattern-marker.patt'
              >
        <a-entity id="quest_1"
                  click-handler="1"
                  gltf-model="#znak-model"
                  scale="2 2 2"
                  entity-color>
        </a-entity>
    </a-marker>

<a-marker id="marker_2"
              cursor="fuse: false; rayOrigin: mouse"
              type='pattern'
              url='./markers/2-pattern-marker.patt'
             >
        <a-entity id="quest_2"
                  click-handler="2"
                  gltf-model="#znak-model"
                  scale="2 2 2"
                  entity-color>
        </a-entity>
    </a-marker>

    <a-entity camera></a-entity>
</a-scene>

</body>
RamanHaivaronski commented 5 years ago

upd: solved 

AFRAME.registerComponent('question-click-handler', {
        init: function () {

            let questionId = this.el.id.match(/\d+$/)[0];
            let modelComponent = document.querySelector(`#quest_${questionId}`);
            let clickableComponent = document.querySelector(`#${this.el.id}`);

            this.el.addEventListener('click', function (event, target) {
                window.store.dispatch(window.actions.fetchQuest(questionId));
            });
}