javascript - A-FRAME 不同的组件同时被调用

Question

我已经成功实现了单击不同标记并在每次单击它们时使它们的对象缩放或旋转的能力。

我的问题是，当我有两个不同的标记和两个不同的组件时，每次点击都会调用它们。这让我很困惑。为什么他们都会被召唤？

更新！！！

我还没有解决这个问题，但我已经缩小到我认为导致它的原因。

我打印了多个标记并挂在我的办公室周围。当我将相机聚焦在不同的标记上时，它们基本上都集中在我的屏幕上。如果我将标记放在相机的中心，两个标记都在同一个位置。而且，他们都开火了。

如果我并排打印了两个标记，并且两个标记同时在我的屏幕上，那么如果我单击一个标记，它们就会相互独立地单击。

如果我用手移动打印输出并将一个标记放在另一个上面。然后他们又回到同时开火。

它肯定与标记占用的屏幕区域有关。

我希望这是有道理的。

当标记被发现和丢失时，有没有办法“清除”或“刷新”东西？

最终目标是让用户走在墙上贴有条形码的走廊上，这样他们就可以看到虚拟绘画。用户肯定会专注于条形码，因此会出现上述问题。

任何建议表示赞赏！

这是我的 JavaScript 代码：

AFRAME.registerComponent('marker-image-click', {
        init: function() {
          
          const objImageImage = document.querySelector('#image-image');
          let intRotationX = objImageImage.getAttribute('rotation').x;
          let intRotationY = objImageImage.getAttribute('rotation').y;
          let intRotationZ = objImageImage.getAttribute('rotation').z;

          objImageImage.addEventListener('click', function(ev, target) {
            
            if (objImageImage.object3D.visible === true) {
            
              console.log('click-image');

              objImageImage.setAttribute('rotation', {x: intRotationX, y: intRotationY, z: intRotationZ});

              intRotationX += 6.0;
              intRotationY += 6.0;
              intRotationZ += 6.0;
              
            }
            
          });
          
        }
        
      });
      
      AFRAME.registerComponent('marker-avocado-click', {
        init: function() {
          
          const objEntityAvocado = document.querySelector('#entity-avocado');
          let intScaleX = objEntityAvocado.getAttribute('scale').x;
          let intScaleY = objEntityAvocado.getAttribute('scale').y;
          let intScaleZ = objEntityAvocado.getAttribute('scale').z;

          objEntityAvocado.addEventListener('click', function(ev, target) {
            
            if (objEntityAvocado.object3D.visible === true) {
            
              console.log('click-avocado');

              objEntityAvocado.setAttribute('scale', {x: intScaleX, y: intScaleY, z: intScaleZ});

              intScaleX += 0.25;
              intScaleY += 0.25;
              intScaleZ += 0.25;
              
            }
            
          });
          
        }
        
      });

这是我的 HTML 代码：

<a-marker marker-image-lostfound marker-image-click id="marker-image" type="barcode" value="2" emitevents="true">
        <a-entity cursor="rayOrigin: mouse" 
                  raycaster="objects: .clickable-image; useWorldCoordinates: true;"> <!-- must add this for clicking -->
        <a-image id="image-image" class="clickable-image"
                 src="images/test.png" 
                 position="0 0 0" rotation="-90 0 0" scale="1 1 1" 
                 width="" height="" opacity="1"> <!-- note the class="clickable" for clicking -->
        </a-image>
      </a-marker>
      
      <a-marker marker-avocado-lostfound marker-avocado-click id="marker-avocado" type="barcode" value="3" emitevents="true">
        <a-entity cursor="rayOrigin: mouse" 
                  raycaster="objects: .clickable-avocado; useWorldCoordinates: true;"> <!-- must add this for clicking -->
        </a-entity>
        <a-entity id="entity-avocado" class="clickable-avocado"
                  gltf-model="models/Avocado/Avocado.gltf"
                  position="0 0 0.3" rotation="-90 0 0" scale="10 10 10"> <!-- note the class="clickable" for clicking -->
        </a-entity>
      </a-marker>

标签： javascriptcomponentsclickaframe