0

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.

Micah Blumberg
  • 81
  • 5

1 Answers1

1

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);
ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • Well besides the reparenting question, it’s also about how to define individual or independent simultaneous &or subsequent scaling/rotation/positioning for each entity in the container So a-entity id=group animation begin=click> – Micah Blumberg Nov 21 '18 at 09:00
  • So my object was to illustrate that 1 click, could cause simultaneous scale/position/rotation for each entity in the group, and each entity would have it’s own scale/position/rotation, independently defined, and each entity could have a path or series of scale/positions and rotations. – Micah Blumberg Nov 21 '18 at 09:00
  • So animate a-entity id=group2 a-entity id=child1ofgroup2 Scale from XYZ to new XYZ Scale from XYZ to new XYZ Duration Position from XYZ to new XYZ Scale from XYZ to new XYZ Ease, Duration Rotate from XYZ to new XYZ Scale from XYZ to new XYZ Position from XYZ to new XYZ a-entity id=child2ofgroup2 Scale Position Duration/Ease Position Duration2/ease2 Scale2 Rotate/Position/Scale duration Scale – Micah Blumberg Nov 21 '18 at 09:06
  • Maybe animation-timeline component? – ngokevin Nov 21 '18 at 10:15