How to union entities together in A-frame

Question

Does anyone know how to union 2 or more entities as a single entity in A-frame? Is this even possible? I am building objects such as tables etc and I would like to union the table to its legs so that it is one object.

Any help would be much appreciated!

Answer 1

If You don't need to merge their geometries / materials, You can just add them to a parent entity. If You have a <a-entity desk>, and <a-entity legs> You can combine them like this:

<a-entity desk>
    <a-entity leg position="1 0 1"></a-entity> 
    <a-entity leg position="-1 0 -1"></a-entity> 
    <a-entity leg position="1 0 -1"></a-entity> 
    <a-entity leg position="-1 0 1"></a-entity> 
</a-entity>

So now You have a parent entity which you can rotate / position together with the child entities. Check it out here.

Otherwise You can create a component, which creates the entity for You:

AFRAME.registerComponent("table", {
 init: function() {
   let desk = document.createElement("a-entity");
   let leg = document.createElement("a-entity");


   desk.setAttribute("mixin", "desk");
   leg.setAttribute("position", "0.5 0 0.5");
   leg.setAttribute("mixin", "leg");
   // (..)
   desk.appendChild(leg)
   this.el.appendChild(desk);
  }
})

You can use it like this:

<a-entity table></a-entity>

or You can register a primitive:

AFRAME.registerPrimitive("a-table", {
     defaultComponents: {
           table: {}
     }
})
<a-table></a-table>

Check it out here.