ジオメトリに複数のジオメトリを表示するにはどうすればいいですか？

Question

私は球の中に複数の球を表示したいです。私が球を持っているとしたら、その球にカーソルを移動すると他の球が表示され、複数の球のうちの1つをクリックすると別の球が表示されます。

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

を、各チェーン球に部品を取り付ける：事前に定義されたオブジェクトの場合

---

、クリックするだけで彼らの最初の子を見えるように。