如何在一帧中单击几何图形显示多个几何图形？

Question

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

Answer 1

这取决于球体是否是预定义的，或者 "procedural"。

如果你想在每次点击球体时创建新球体，你可以为场景创建一个新组件，监听任何点击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() 不应该工作，因为它应该选择 'first' 找到的选择器，但出于某种原因它在这里工作。

现场示例：https://jsfiddle.net/wqbxnakr/。

对于预定义的对象，只需使其第一个子项在单击时可见：

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

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

如何在一帧中单击几何图形显示多个几何图形？

How to show multiple geometry on geometry click in a-frame?

webvr

aframe