Aframe：我如何链接实体，以便用户可以链接/取消链接实体，因此实体将一起动画，并一起交互答案

【问题标题】：Aframe: How do I link entities, so the user can link/unlink entities, and so entities will animate together, and interact togetherAframe：我如何链接实体，以便用户可以链接/取消链接实体，因此实体将一起动画，并一起交互
【发布时间】：2019-04-23 13:27:53
【问题描述】：

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

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

堆存在 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 将一起缩放、旋转和定位。

【问题讨论】：

标签： entity aframe webvr webxr

【解决方案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);

【讨论】：

除了reparenting问题之外，这也是关于如何为容器中的每个实体定义单独或独立的同时&或后续缩放/旋转/定位所以a-entity id=group动画开始=单击>
所以我的目的是说明一次单击可能会导致组中每个实体同时进行缩放/位置/旋转，并且每个实体都有自己的缩放/位置/旋转，独立定义，并且每个实体都可以有一个路径或一系列比例/位置和旋转。
So animate a-entity id=group2 a-entity id=child1ofgroup2 从 XYZ 缩放到新 XYZ 从 XYZ 缩放到新 XYZ 持续时间从 XYZ 到新 XYZ 的位置从 XYZ 缩放到新 XYZ 缓动，持续时间从 XYZ 旋转到新的 XYZ 从 XYZ 缩放到新的 XYZ 位置从 XYZ 到新的 XYZ a-entity id=child2ofgroup2 缩放位置持续时间/缓动位置持续时间2/ease2 Scale2 旋转/位置/缩放持续时间 Scale
可能是动画时间线组件？