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