기하학에 여러 지오메트리를 표시하는 방법 a- 프레임을 클릭 하시겠습니까?

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

를 각 체인 영역에 구성 요소를 첨부 : 미리 정의 된 객체의 경우

---

, 단지 클릭에 자신의 첫 아이가 볼 수 있도록.