A-Frame + AR.js：点击屏幕时如何在 Arjs 中动态添加对象？

Question

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);
  });
  },
  });
  

Answer 1

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>