Блог

Главная - Вопросы по программированию - Поиск прикрепленных дочерних объектов фрейма / маркера

Поиск прикрепленных дочерних объектов фрейма / маркера

#aframe

#aframe

Вопрос:

У меня есть небольшая программа на основе A-frame для отображения текста на маркере. Когда пользователь нажимает на маркер, я хотел бы масштабировать текст, чтобы он был более заметным. Я могу зафиксировать событие щелчка на маркере, но как я могу заставить его дочерние объекты масштабироваться?

Мой код можно найти в 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>

Ответ №1:

Провел дополнительное тестирование и обнаружил следующее.

  1. Событие ‘click’ не работает так, как я ожидал, на маркере. Он регистрируется для всей сцены и вызывается независимо от того, где я нажимаю. Это не то, чего я хочу. Я рассматриваю возможность использования точек пересечения, чтобы заставить его работать.
  2. Однако получить доступ к дочернему элементу можно легко, если вы введете уникальные идентификаторы. Мы можем использовать обычный document.getElementById(«boxelementId»); и изменить атрибуты с помощью метода setAttribute .

Пример: для изменения текста

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

Я использовал выше внутри события ‘markerFound’, чтобы показывать другое / текущее значение, когда пользователь указывает на определенный маркер.