如何在A-Frame中注册由少量元素组成的组件？

Question

我有这个小提琴 ，我想知道如何将其转换为组件。 它旨在显示工具提示，以指示某个房间的用途，以及它的运作方式（类似UI）。 我已经阅读了一些关于如何在官方网站上创建组件的指南，但是如何将一堆元素打包到一个组件中并不清楚。 我计划根据我的用法处理定位，我只是没有看到如何打包多个元素。

<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

可以通过创建元素并将它们附加到基础实体来实现将多个元素创建为组件：

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>

---

我喜欢将我的东西注册为原语，因此我可以在任何地方添加自定义的<a-tooltip></a-tooltip>实体：

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

并使用它：

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

---

如果您有多个实体，则可以触发其<a-tooltip></a-tooltip>子可见性以实现您想要的效果。

工作小提琴： 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>