A-Frame + AR.js：點擊屏幕時如何在 Arjs 中動態添加對象？

Question

我目前正在使用 ar.js 開發 A-Frame AR 應用程序（我必須使用 ar.js）。 目標是在點擊場景時將對象動態添加到場景中。 不幸的是，似乎什么都沒有解決。 在點擊屏幕但沒有添加新的時，我設法更改了現有 object 的 colors。 有人可以幫我嗎？ 我將不勝感激！

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

您應該 append 元素到標記節點，並將其視為您的“根”元素 - 因為它是被相機檢測到的元素：

<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>