如何在 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/

更多关于原语在这里。