框架同时调用了不同的组件

如何解决框架同时调用了不同的组件

我已经成功实现了单击不同标记并使其缩放或旋转的功能。

我的问题是，当我有两个带有两个不同组成部分的标记时，每次单击它们都会被调用。这让我感到困惑。为什么都叫他们两个？

更新！

我尚未解决问题，但已缩小到我认为是引起问题的原因。

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

如果我并排打印了两个标记，并且两个标记同时显示在屏幕上，那么如果单击一个，它们将彼此独立单击。

如果我用手移动打印件并将一个标记放在另一个标记的上方。然后，他们同时返回两个射击。

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

我希望这是有道理的。

找到并丢失标记时，是否可以“清除”或“刷新”事物？

最终目标是让用户沿着走廊上的墙壁走过条形码，这样他们才能看到虚拟绘画。用户肯定会关注条形码，因此会出现上述问题。

任何建议都值得赞赏！

这是我的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',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>