Aframe: Как связать сущности, чтобы пользователь мог связывать / отменять связь сущностей, и таким образом сущности будут анимироваться вместе и взаимодействовать вместе

Question

Как бы я связал и разорвал несколько сущностей вместе, чтобы они могли быть анимированы вместе.

Примером является то, что есть небольшая куча сущностей. Когда я нажимаю на эту кучу, она растекается и направляется вверх к пользователю, так что это уже не куча, а ряд незаметных объектов, каждый из которых разделен небольшим расстоянием.

Куча существует из 3 сущностей A, B и C

Если я нажму на объект с идентификатором A, то все они масштабируются / позиционируются / поворачиваются обратно в кучу.

Если я нажму на идентификатор сущности B, то все сущности переместятся влево. Если я нажимаю на сущность C, то C покидает кучу, и ее движения больше не связаны с кучей.

Есть еще одна куча с сущностями X, Y и Z

Если сущность X, Y или Z находится рядом с сущностью C, тогда сущность C объединяет кучу X, Y, Z. Если пользователь нажимает на объект Z и перетаскивает его, чтобы быть рядом с объектом A или B, тогда объект Z присоединяется к куче A & B,

Таким образом, если щелкнуть объект A, то A, B и Z будут масштабироваться, вращаться и располагаться вместе.

Answer 1

Я считаю, что основной вопрос заключается в том, как переопределить сущности в контейнеры сущностей и из них, при условии, что понятно, что анимация / перемещение контейнера сущностей перемещает все его дочерние элементы, и как прослушивать события щелчка. Вот контейнер:

<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>

Пока нет чистого способа переопределить объекты A-Frame на уровне DOM, так как отсоединение / повторное присоединение удалит / повторно инициализирует все компоненты. Вы можете переместить объект с помощью three.js.

var someOtherContainer = document.getElementById('someOtherContainer').object3D;
var childToReparent = document.querySelector('#someChildToRemoveFromContainer');
someOtherContainer.add(childToReparent);