Aフレームにいくつかの要素で構成されたコンポーネントを登録するにはどうすればよいですか？

Question

私はthis fiddleを持っていて、どのようにコンポーネントに変換できるのか知っています。特定の部屋が何であるのか、それがどのように動作するのか（UIのようなもの）を示すヒントを表示することを目的としています。私は公式のウェブサイトでコンポーネントを作成する方法についていくつかのガイドを読んだが、単一のコンポーネントにたくさんの要素をパックする方法は明確になっていない。私は自分の使い方に従って配置を扱うことを計画していますが、私は複数の要素をパックする方法を見逃しています。

AFRAME.registerComponent('foo',{ 
    init:function(){ 
    let box = document.createElement('a-box'); 
    let sphere = document.createElement('a-sphere'); 
    box.setAttribute('whatever you want'); 
    sphere.setAttribute('whatever you want'); 
    this.el.appendChild(box); 
    box.appendChild(sphere); 
    } 
}); 

と既存のエンティティに追加：

<a-entity foo></a-entity> 

---

成分が要素を作成し、ベース・エンティティにそれらを追加することによって達成することができるように

<script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script> 
<a-scene> 
<!-- Assets --> 
<a-assets> 
</a-assets> 

<!-- Camera --> 
<a-entity position="0 1 0" camera universal-controls wasd-controls="fly:true" look-controls></a-entity> 

<!-- Scene --> 
<a-box position="-1 0.45 -3" rotation="0 45 0" color="#4CC3D9"></a-box> 
<a-plane position="0 0 -5" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> 
<a-sky color="#ECECEC"></a-sky> 

<!-- Pop-up thing --> 
<a-image id="popup-bg" position="0.1 1 -2.2" color="#cc00ff" width="3.1" height="3.3" opacity="0.8"></a-image> 
<a-text id="popup-title" position="-0.3 2.4 -2.15" value="Room 2.1" color="#333333"></a-text> 
<a-image id="popup-image" position="0.1 1.7 -2.15" color="#ee6400" width="2.2" height="1"></a-image> 
<a-entity id="popup-description" position="0.1 0.7 -2.15" 
geometry="primitive: plane; width: 2.8; height: 0.52;" 
    material="visible:true; color:white;" text="value:Sala de aula regular no periodo matutino e vespertino.; color:#333333; width:2.8; height:0.52; baseline:bottom;"></a-entity> 
<a-text id="popup-schedule-label" position="-1.3 0.35 -2.15" value="Horarios" color="#ccc" width="2.8"></a-text><a-text id="popup-schedule-year" position="-0.8 0.35 -2.15" value="(2017)" color="#ccc" width="2.2"></a-text> 
<a-entity id="popup-schedule-frame" position="0.1 -0.1 -2.15" geometry="primitive: plane; width: 2.8; height: 0.7;" material="color:white"></a-entity><a-text id="popup-schedule-1" position="-1.28 0.15 -2.14" value="<07:30 - 11:40> Biologia (3o ano)" color="#333333" width="2.6"></a-text><a-text id="popup-schedule-2" position="-1.28 0 -2.14" value="<13:10 - 17:30> Administracao (1o ano)" color="#333333" width="2.6"></a-text> 
</a-scene> 

Answer 1

複数の要素を作成します 私は自分のものをプリミティブとして登録したいので、カスタムを使用することができます<a-tooltip></a-tooltip>エンティティはどこにでも追加します：

AFRAME.registerPrimitive('a-tooltip', { 
    defaultComponents: { 
    foo: {}, 
    }, 
    mappings:{ 
    name:'foo.schemaAttribute', 
    } 
}); 

そして、それを使用します。

<a-tooltip name="whatever"></a-tooltip> 

---

あなたが複数のエンティティを持っている場合は、あなたが望むものを達成するために彼らの <a-tooltip></a-tooltip>子の可視性をトリガすることができます。プリミティブ hereについて https://jsfiddle.net/4b0pskc1/1/

詳細：ここにフィドル作業

。

Answer 2

テンプレートコンポーネント：https://github.com/ngokevin/kframe/tree/master/components/template

<a-scene> 
    <a-assets> 
    <script id="boxesTemplate"> 
     <a-box color="${box1color}" position="-1 0 -5"></a-box> 
     <a-box color="${box2color}" position="0 1 -5"></a-box> 
     <a-box color="${box3color}" position="1 0 -5"></a-box> 
    </script> 
    </a-assets> 

    <a-entity template="src: #boxesTemplate" 
      data-box1color="red" data-box2color="green" data-box3color="blue"></a-entity> 
</a-scene>