查找附加的A框架/标记的子对象

如何解决查找附加的A框架/标记的子对象

我有一个小的A框架程序，可在标记上呈现文本。当用户单击标记时，我想缩放文本，这样它将更加可见。我可以捕获标记上的点击事件，但是如何获取其子实体以进行缩放？

我的代码可以在https://codepen.io/asatrash/pen/rNLMgpa

中找到

  <!DOCTYPE html>
    <html>
       <head>
            <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
            <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>   
      </head>
    <body>


    <script>
      //Multi Markers WebAR-AR.js and Aframe - Playing the Archive - Connected Environment CASA-UCL

      //Global Variable
      var markersURLArray=[];
      var markersNameArray=[];
      var allow_clicks = false;

      AFRAME.registerComponent('markers_start',{
        init:function(){
          console.log('Add markers to the scene');

          var sceneEl = document.querySelector('a-scene');
          
          //list of the markers
          for(var i=1; i<6; i++)`enter code here`
          {
            var url="https://raw.githubusercontent.com/asatrash/ARInWeb/main/resources/markers/pattern-Individual_Blocks-3.patt";
            markersURLArray.push(url);
            markersNameArray.push('Marker_'+i);
            //console.log(url);
          }

          for(var k=0; k<5; k++)
          {
            var markerEl = document.createElement('a-marker');
            markerEl.setAttribute('type','pattern');
            markerEl.setAttribute('url',markersURLArray[k]);
            markerEl.setAttribute('id',markersNameArray[k]);

            markerEl.setAttribute('registerevents','');
            sceneEl.appendChild(markerEl);


            var boxEl = document.createElement('a-box');
            boxEl.setAttribute('id','box');
            boxEl.setAttribute('depth','0.001');
            boxEl.setAttribute('width','6');
            boxEl.setAttribute('height','4');
            boxEl.setAttribute('opacity','0.25');
            boxEl.setAttribute('position','0 -2 -4');
            boxEl.setAttribute('rotation','0 0 0');
            boxEl.setAttribute('material',{color: '#000000'});
            markerEl.appendChild(boxEl);


            var textEl = document.createElement('a-text');
            textEl.setAttribute('id','text');
            textEl.setAttribute('text',{color: '#ffff00',align: 'left',value:'This is a very log text /b \n line which might or might not wrap',width: '2' });
            //textEl.setAttribute('position','-1.4 1.5 0');
            textEl.setAttribute('position','-2.5 1.5 0')
            textEl.setAttribute('scale','2 2 0'); 
            boxEl.appendChild(textEl); 
          }            
       
        }
        
      });


      //Detect marker found and lost
      AFRAME.registerComponent('registerevents',{
          init: function () {
            const marker = this.el;
            

            marker.addEventListener("markerFound",()=> {
              var markerId = marker.id;
              console.log('Marker Found: ',markerId);
              allow_clicks = true;
            });

            marker.addEventListener("markerLost",() =>{
              var markerId = marker.id;
              console.log('Marker Lost: ',markerId);
              allow_clicks = false;
            });
            
             marker.addEventListener('click',(evt) => {
                  if (allow_clicks){
                     console.log("CLICKED!!!" + marker.id);
                    //I want to scale the box and the text attached to the marker jere
                  }            
            });
          },});

        </script> 

        <a-scene markers_start vr-mode-ui="enabled: false" color-space="sRGB" renderer="gammaOutput: true"
            embedded arjs='debugUIEnabled: false; sourceType: webcam; patternRatio: 0.85; trackingMethod: best;'> 
              <a-entity id='userCamera' camera look-controls > 
                <a-cursor> </a-cursor> 
              </a-entity> 
        </a-scene>  
</body>
</html>

解决方法

进行了更多测试，并发现了以下内容。

“点击”事件没有按预期在标记上起作用。它已注册到整个场景，并且无论我单击的位置如何，它都会被调用。这不是我想要的。我正在考虑使用相交点使其正常工作。
但是，如果您放置唯一的ID，则可以轻松地访问孩子。我们可以使用普通的document.getElementById（“ boxelementId”）;并使用setAttribute方法更改属性。

例如：更改文字

var markerTextEl = document.getElementById(markerTextxId);
markerTextEl.setAttribute("value","Current Temperature is: " + data);

我在上面的'markerFound'事件中使用了当用户指向特定标记时显示不同的/当前值。

查找附加的A框架/标记的子对象

如何解决查找附加的A框架/标记的子对象

解决方法

相关推荐