手动控件不会渲染以编程方式附加的子实体的子实体（AFRAME 1.6.0）

Question

对于上下文，我试图通过将对象的实体附加为带有手控组件的实体的子实体来模拟玩家用 VR 手控制器抓取虚拟对象。

我遇到了一个问题，

hand-controls

实体未在 AFRAME 版本中渲染其子实体的子实体：1.6.0

直接在 DOM 中声明的几个级别的

<a-entities>

可以正确渲染。例如，这将在手模型的背面写上“foo bar”：

<a-entity hand-controls="hand: left; ...">
  <a-text value="foo" position="-0.028 0.05 0" rotation="185 90 0">
    <a-text value="bar" position="0.03 0 0"></a-text>
  </a-text>
</a-entity>

当我尝试以编程方式执行此操作时，事情会变得梨形，通过从场景中分离一组实体并将它们重新附加到手动控制实体：

index.html:
<a-box id="foo" color="red" position="1 2 -3" width...>
  <a-box id="bar" color="yellow" position="-0.5 0 -1"></a-box>
</a-box>
<a-entity hand-controls="hand: left; ..."></a-entity>

some system or component JS file:
  foo = document.querySelector('#foo');
  foo.removeFromParent();
  // foo had a world position, resetting it so it's local to the hand controller's origin (otherwise it will render far from the hand model rather than in its palm)
  foo.setAttribute('position', '0 0 0');
  document.querySelector('[hand-controls]').appendChild(foo);

这会将 #foo 框放入手模型中，但嵌套的 #bar 框根本不会渲染。

我只是不明白为什么会这样，或者我缺少什么转换/步骤来渲染所有嵌套子级的层次结构。任何帮助/见解表示赞赏。

Answer 1

TL;DR：AFRAME 不支持重新设置父级（请参阅 https://github.com/aframevr/aframe/issues/2425）

2 个解决方法：

• 将手部控制器的位置和旋转复制到抓取的实体（需要注意的是，手部模型被 AFRAME 人为地向下旋转 90 度，因此抓取的对象需要包裹在一个实体中以抵消额外的旋转）
• 将抓取的实体保留在 DOM 中的位置，但将其添加为手部控制器的 THREEJS Object3D 的子级（绕过 AFRAME 并破坏 AFRAME 和 THREE.JS 对象层次结构之间的同步，这可能会导致以后出现问题）