ar.js 中的事件监听器答案

【问题标题】：Event listeners in ar.jsar.js 中的事件监听器
【发布时间】：2020-03-30 16:41:36
【问题描述】：

我正在开发一个涉及 ar.js 的项目，该项目显示 3d 对象和文本，以在移动设备和笔记本电脑上教孩子们字母表。我试图添加一个事件监听器作为额外的让孩子们进行更多互动。我的目标是点击/触摸显示的模型，它会放大或改变颜色或旋转。附件找到我的代码。希望你能解决我的问题。

HTML 代码

<!DOCTYPE html>
<html>
    <head>
<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 src = "event.js"></script>
        <script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
     </head>   
    <body>
<a-scene embedded arjs = 'sourceType: webcam; debugUIEnabled:false;'>
<a-assets>
                <a-asset-item id = "apple" src = "apple/scene.gltf"></a-asset-item>
        </a-assets>
 <a-marker id = "appleM" type = "pattern" url = "Asset/pattern-apple.patt"
        markerhandler emitevents = "true" cursor="rayOrigin: mouse">

            <a-entity id = "animatedApple" gltf-model = "#apple" position = "0 -1 0" scale = ".05, .05, .05"></a-entity>

            <a-text value="A for Apple"  color = "purple" position = "-1.3 1 0" scale = '2, 2, 2'></a-text>
</a-marker>
<a-entity camera></a-entity>
      </a-scene>
    </body>
</html>

event.js（事件处理程序文件）

init: function() {
        const animatedMarker = document.querySelector('#appleM');
        const aEntity = document.querySelector('#animatedApple');

        // every click, we make our model grow in size :)
        animatedMarker.addEventListener('click', function(ev, target){
            const intersectedElement = ev && ev.detail && ev.detail.intersectedEl;
            if (aEntity && intersectedElement === aEntity) {
                const scale = aEntity.getAttribute('scale');
                Object.keys(scale).forEach((key) => scale[key] = scale[key] + 1);
                aEntity.setAttribute('scale', scale);
            }
        });
}});

【问题讨论】：

标签： javascript html augmented-reality ar.js

【解决方案1】：

我认为主要问题在于a-frame version 1.0.X。出于某种原因，如果我使用 addEventListerner('click') 将无法工作。

下面是我的代码，你点击你的模型，它应该会增加比例。注意：click event not at the expected spot 存在问题。

<!DOCTYPE html>
<html>
<head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script src="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>
    <script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
</head>   
<body>
    <a-scene embedded arjs = 'sourceType: webcam; debugUIEnabled:false;'>
    <a-assets>
        <a-asset-item id = "apple" src = "apple/scene.gltf"></a-asset-item> <!-- change to your assets -->
    </a-assets>
    <a-marker id = "appleM" preset="hiro" emitevents="true" button> <!-- change to your marker, i use default hiro.jpg -->
        <a-entity cursor="rayOrigin: mouse" raycaster="objects: .clickable; useWorldCoordinates: true;"></a-entity> <!-- important for addEventListener('click'). Notice the '.clickable'-->
        <a-entity class="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-text id="aText" value="A for Apple"  color = "purple" position = "0 0 0" rotation="270 0 0" scale = "2 2 2"></a-text>
    </a-marker>
    <a-entity camera></a-entity>
    </a-scene>
</body>
</html>

【讨论】：

首先感谢您帮助我。它工作得很好。我对比例属性进行了一些更改，只是为了以较慢的速度放大。我在文本标签的同一函数中添加了一个事件侦听器以更改颜色。我设法获得了颜色属性。我的问题是我不知道我需要输入哪些命令。我尝试过“document.getElementById("text").setAttribute(color, 'yellow')。我尝试了不同的方式，甚至使用了“style.color='yellow'”。你有线索吗？问候，大卫跨度>
我认为您忘记将class="clickable" 放入您的<a-text>。 document.getElementById("aText").setAttribute('color', 'yellow') 也可以正常工作，如果您在 'color' 中输入错误/忘记了，请确认。
没用。如果有多个标记，则无法找到单击了哪个标记。