Skip to content Skip to sidebar Skip to footer
Home / Ar.js / Augmented Reality / Html / Javascript

Event Listeners In Ar.js

Post a Comment
I am developing a project which involves ar.js that is displaying 3d objects and text to teach children the alphabet on both mobile devices and laptops. I was trying to add an even

Solution 1:

I think the main issue is something with a-frame version 1.0.X. For some reason the addEventListerner('click') won't work if I use that.

Below is my code, you click your model and it should increase the scale. Note: there is issue about the click event not at the expected spot.

<!DOCTYPE html><html><head><scriptsrc="https://aframe.io/releases/0.9.2/aframe.min.js"></script><scriptsrc="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.2/aframe/build/aframe-ar.js"></script><!-- IDK Why If I Use This, The addEventListener('click') won't work--><!--     <script src = "https://aframe.io/releases/1.0.3/aframe.min.js"></script>    --><!--     <script src = "https://cdn.rawgit.com/jeromeetienne/AR.js/1.6.0/aframe/build/aframe-ar.js"></script>  --><script>AFRAME.registerComponent('button', {
            init: function() {

                const gltf = document.querySelector('#animatedApple');
                var x = gltf.getAttribute('scale').x;
                var y = gltf.getAttribute('scale').y;
                var z = gltf.getAttribute('scale').z;

                // every click, we make our model grow in size :)
                gltf.addEventListener('click', function(ev, target){
                    console.log(gltf.getAttribute('scale'));
                    gltf.setAttribute('scale', x + " " + y + " "+ z);
                    x += 0.1;
                    y += 0.1;
                    z += 0.1;
                });
            }
        });
    </script><scriptsrc="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script></head><body><a-sceneembeddedarjs = 'sourceType: webcam; debugUIEnabled:false;'><a-assets><a-asset-itemid = "apple"src = "apple/scene.gltf"></a-asset-item><!-- change to your assets --></a-assets><a-markerid = "appleM"preset="hiro"emitevents="true"button><!-- change to your marker, i use default hiro.jpg --><a-entitycursor="rayOrigin: mouse"raycaster="objects: .clickable; useWorldCoordinates: true;"></a-entity><!-- important for addEventListener('click'). Notice the '.clickable'--><a-entityclass="clickable"id ="animatedApple"gltf-model = "#apple"position = "0 0 0"rotation="270 0 0"scale = "0.5 0.5 0.5"></a-entity><!-- Notice the '.clickable'--><a-textid="aText"value="A for Apple"color = "purple"position = "0 0 0"rotation="270 0 0"scale = "2 2 2"></a-text></a-marker><a-entitycamera></a-entity></a-scene></body></html>

Post a Comment for "Event Listeners In Ar.js"