0

我如何将多个实体链接和取消链接在一起，以便它们可以一起动画。

一个例子是有一小堆实体。当我点击这个堆时，它会散开并向上浮向用户，所以它不再是一堆，而是一系列谨慎的实体，每个实体都相隔一小段距离。

该堆存在 3 个实体 A、B 和 C

如果我单击 ID A 的实体，那么它们都会缩放/定位/旋转回一堆。

如果我单击实体 ID B，则所有实体都向左移动。如果我单击实体 C，则 C 离开桩，它的运动不再与桩相关联。

还有另一堆实体 X、Y 和 Z

如果实体 X、Y 或 Z 靠近实体 C，则实体 C 加入 X、Y、Z 堆。如果用户点击实体 Z 并将其拖到实体 A 或 B 附近，则实体 Z 加入桩 A 和 B，

因此，如果单击实体 A，则 A、B 和 Z 将一起缩放、旋转和定位。

4

1 回答 1

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>

由于分离/重新附加将删除/重新初始化所有组件，因此没有一种干净的方法可以在 DOM 级别重新设置 A-Frame 实体的父级。您可以使用 three.js 将实体移出。

var someOtherContainer = document.getElementById('someOtherContainer').object3D;
var childToReparent = document.querySelector('#someChildToRemoveFromContainer');
someOtherContainer.add(childToReparent);
于 2018-11-21T07:28:24.927 回答