[SOLVED] A-Frame + AR.js: How to add objects dynamically in Arjs when tapping on screen?

A-Frame + AR.js: How to add objects dynamically in Arjs when tapping on screen?

I'm currently working on an A-Frame AR app by using ar.js (I have to use ar.js). The goal is to dynamically add objects to the scene when tapping on the scene. Unfortunately nothing seems to work out. I managed to change the colors of an existing object when tapping on the screen but not adding a new one. Could someone please help me out here? I would be really grateful!

AFRAME.registerComponent('cursor-listener', {
  init: function () {
  var currentEl = this.el;
  currentEl.addEventListener("click", function (evt) {
  console.log("I was clicked!");
  currentEl.setAttribute('material', {"color": "blue"});
  var el = document.createElement("a-entity");
  el.setAttribute('geometry', { "primitive": "sphere", "radius": "1" });
 
  
  
  el.setAttribute('position', this.el.object3D.position)
  const randomYRotation = Math.random() * 360
  el.setAttribute('rotation', `0 ${randomYRotation} 0`)
  el.setAttribute('visible', 'true')
  el.setAttribute('shadow', {receive: false})
  this.el.sceneEl.appendChild(el);
  });
  },
  });

Solution

this.el.sceneEl.appendChild(el);

You should append the element to the marker node, and treat it as your "root" element - as it's the one being tracked when detected by camera:

<script>
  AFRAME.registerComponent('cursor-listener', {
     init:function () {
       const marker = document.querySelector("a-marker")
       var el = document.createElement("a-sphere");
       marker.appendChild(el);
     }
  })
</script>
<!-- scene and stuff -->
<a-marker preset="hiro>
</a-marker>