如何在几何图形中显示多个几何图形？

Question

我想在一个球体点击显示多个球体。假设我有一个球体，当我将光标移到该球体时，它将显示其他球体，当我单击多个球体之一时，它将显示另一个多个球体。

Answer 1

这取决于球体是预定义的还是“程序的”。

如果您想在每次球体点击时创建新球体，您可以为场景创建一个新组件，监听任何a-sphere 上的任何点击，并将新球体附加到目标：

AFRAME.registerComponent('foo',{
  init:function(){
     document.querySelector("a-sphere").addEventListener('click',this.createSpheres);
  },
  createSpheres:function(){
    let sphere1 = document.createElement('a-sphere');
    sphere1.setAttribute('position','-1 1 1');
    let sphere2 = document.createElement('a-sphere');
    sphere2.setAttribute('position','2 1 2');
    let sphere3 = document.createElement('a-sphere');
    sphere3.setAttribute('position','-1 -1 -1');
    e.target.appendChild(sphere1);
    e.target.appendChild(sphere2);
    e.target.appendChild(sphere3);
  }
});

我在这里做的是检查点击 -> 调用负责球体创建的函数。

据我所知，document.querySelector() 不应该工作，因为它应该选择“第一个”找到的选择器，但由于某种原因它在这里工作。

此处的实时示例：https://jsfiddle.net/wqbxnakr/。

---

对于预定义的对象，只需让他们的第一个孩子在点击时可见：

AFRAME.registerComponent('bar',{
  init:function(){
    this.el.addEventListener('click',(e)=>{
       this.el.children[0].setAttribute('visible','true');
    }
  }
});

并将组件附加到每个链接的球体。