Htykuut

How would I link and unlink multiple entities together so that they can be animated together.

An example is that there is a small pile of entities. When I click on this pile it spreads apart and floats upwards towards the user, so it's not a pile any more but a series of discreet entities each separated by a small distance.

The pile exists of 3 entities A, B, and C

If I click on the entity with id A then they all scale/position/rotate back into a pile.

If I click on entity id B then all entities move to the left. If I click on entity C then C leaves the pile and it's movements are no longer associated with the pile.

There is another pile with entities X, Y and Z

If entity X, Y, or Z is near entity C, then entity C joins the X, Y, Z pile. If the user clicks on entity Z and drags it over to be near entity A or B then entity Z joins pile A & B,

So then if entity A is clicked then A, B and Z will scale, rotate, and position together.

I believe the core question is how to re-parent entities to and from entity containers, assuming it is understood that animating/moving an entity container moves all its children, and how to listen to click events. Here's a container:

<a-entity id="groupContainer" animation__position="..." animation__scale="..." animation__rotation="...">

  <a-entity class="child"></a-entity>

  <a-entity class="child"></a-entity>

  <a-entity class="child"></a-entity>

</a-entity>

There isn't a clean way to re-parent the A-Frame entities at the DOM level yet since detaching/re-attaching will remove/reinitialize all components. You can move the entity out with three.js.

var someOtherContainer = document.getElementById('someOtherContainer').object3D;

var childToReparent = document.querySelector('#someChildToRemoveFromContainer');

someOtherContainer.add(childToReparent);