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

Как связать и разъединить несколько объектов вместе, чтобы их можно было анимировать вместе.

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

В стопке 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 будут масштабироваться, вращаться и позиционироваться вместе.


entity aframe webxr webvr
person Micah Blumberg    schedule 21.11.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

<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);
person ngokevin    schedule 21.11.2018
comment
Помимо вопроса о повторном отцовстве, он также о том, как определить индивидуальное или независимое одновременное и или последующее масштабирование / поворот / позиционирование для каждого объекта в контейнере. детская шкала = «от ВВВ; до R R R ”, положение = от T T T; до N N N, вращение = «от U U U к Q Q Q» ›‹ a-entity id = B class = child scale = «from C C C; к D D D ”, позиция = от G G G; в P P P, вращение = «от S S S до A A A» ›‹ a-entity id = C class = child scale = «from M M M; до O O O ”, позиция = от T T T; до N N N, вращение = «от U U U до Q Q Q» ›‹/animation› - person Micah Blumberg; 21.11.2018
comment
Итак, моей целью было проиллюстрировать, что 1 щелчок может вызвать одновременное масштабирование / положение / вращение для каждого объекта в группе, и каждый объект будет иметь свой собственный масштаб / положение / поворот, независимо определенный, и каждый объект может иметь путь или серию масштаба / положений и вращений. - person Micah Blumberg; 21.11.2018
comment
Итак, анимируйте a-entity id = group2 a-entity id = child1ofgroup2 Масштабирование от XYZ до нового XYZ Масштаб от XYZ до нового XYZ Положение продолжительности от XYZ до нового XYZ Масштаб от XYZ до нового XYZ Ease, Продолжительность Поверните от XYZ до нового Масштаб XYZ от XYZ к новому положению XYZ от XYZ к новому XYZ a-entity id = child2ofgroup2 Масштабировать Продолжительность положения / Легкость положения Продолжительность2 / легкость2 Масштаб2 Поворот / Положение / Масштабирование продолжительности Масштаб - person Micah Blumberg; 21.11.2018
comment
Может быть, компонент временной шкалы анимации? - person ngokevin; 21.11.2018