ThreeJS。将节点添加到组中

Question

我正在尝试将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/

Answer 1

实体需要附加到DOM进行初始化。换句话说，您必须执行

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

用于a-foo进行完全初始化-如果要使用基元，必须首先进行操作，然后才能获取object3D引用并将其添加到组中。

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

---

如果只需要一组网格，请考虑在自定义组件中创建它们，而不要使用框架原语。或者，也许仅预加载几何图形，然后覆盖a-foo中的默认几何图形。