Aframe：我如何链接实体，以便用户可以链接/取消链接实体，因此实体将动画在一起，并一起交互 [英] Aframe: How do I link entities, so the user can link/unlink entities, and so entities will animate together, and interact together

问题描述

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

How would I link and unlink multiple entities together so that they can be animated together.

一个例子是一小堆实体。当我单击该桩时，桩会散开并向上浮向用户，因此它不再是桩，而是一系列离散的实体，每个实体之间的距离很小。

An example is that there is a small pile of entities. When I click on this pile it spreads apart and floats upwards towards the user, so it's not a pile any more but a series of discreet entities each separated by a small distance.

该桩存在3个实体A，B和C

The pile exists of 3 entities A, B, and C

如果我单击ID为A的实体，则它们都将缩放/定位/旋转成桩。

If I click on the entity with id A then they all scale/position/rotate back into a pile.

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

If I click on entity id B then all entities move to the left. If I click on entity C then C leaves the pile and it's movements are no longer associated with the pile.

还有另一个桩，其实体X，Y和Z

There is another pile with entities X, Y and Z

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

If entity X, Y, or Z is near entity C, then entity C joins the X, Y, Z pile. If the user clicks on entity Z and drags it over to be near entity A or B then entity Z joins pile A & B,

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

So then if entity A is clicked then A, B and Z will scale, rotate, and position together.

推荐答案

我相信核心问题是，假设了解到动画化/移动实体容器会移动其所有子代，以及如何将实体与其他实体容器进行重新父代化，以及如何听点击事件。这是一个容器：

I believe the core question is how to re-parent entities to and from entity containers, assuming it is understood that animating/moving an entity container moves all its children, and how to listen to click events. Here's a container:

<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将实体移出。

There isn't a clean way to re-parent the A-Frame entities at the DOM level yet since detaching/re-attaching will remove/reinitialize all components. You can move the entity out with three.js.

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

这篇关于Aframe：我如何链接实体，以便用户可以链接/取消链接实体，因此实体将动画在一起，并一起交互的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！