问查找a帧/a标记的附加子对象
EN

Stack Overflow用户

提问于 2020-10-21 20:13:07

回答 1查看 71关注 0票数 0

我有一个小的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>

aframe

回答 1

Stack Overflow用户

发布于 2020-10-22 03:48:36

我做了更多的测试，发现了以下几点。

'click‘事件在标记上不能像我预期的那样工作。它被注册到整个场景中，并且无论我单击的位置如何，它都会被调用。这不是我想要的。我正在考虑使用交叉点来获得它working.
However如果你放置唯一的ids，可以很容易地访问孩子。我们可以使用普通的document.getElementById("boxelementId")；并使用setAttribute方法更改属性。

例如:更改文本

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64463263

复制

相似问题

问查找a帧/a标记的附加子对象
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问查找a帧/a标记的附加子对象EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问查找a帧/a标记的附加子对象
EN