三JS。将节点添加到组

【问题标题】：ThreeJS. Adding Nodes To Group三JS。将节点添加到组
【发布时间】：2020-02-11 20:07:10
【问题描述】：

我正在尝试将 customPrimitive 实体存储在一个组中。问题是：实体通过加载文件来创建自己的几何图形，所以我只需要存储节点。我的代码是

var grp = new THREE.Group();
this.el.sceneEl.object3D.add(grp);
 for (let i = 0; i < 2; i++) {
   let x = document.createElement('a-foo');
   this.el.sceneEl.appendChild(x); // Works, but not what I want
   // grp.appendChild(x);          // grp.appendChild is not a function
   // grp.add(x.object3D)          // Trying to add an element that doesn't have an `object3D`
   // grp.add(x);                  // -^
 }

如何做到这一点？小提琴：https://jsfiddle.net/zrept6wf/2/

【问题讨论】：

标签： javascript three.js aframe

【解决方案1】：

实体需要附加到 DOM 才能初始化。换句话说，你必须这样做

// preferably to the scene: 
this.el.sceneEl.appendChild(x);
// but could be anywhere: 
document.body.appendChild(x);

为了让a-foo 完全初始化 - 如果您想使用原语，您必须先执行此操作，然后才能获取 object3D 引用并将其添加到组中。

// init 
this.el.sceneEl.appendChild(x);
// wait until loaded: x
x.addEventListener('loaded', e => {
   grp.add(x)
})

如果您只想要一组网格 - 考虑在自定义组件中创建它们，而不是使用框架图元。或者可能只预加载几何图形，并覆盖a-foo 中的默认几何图形。

【讨论】：