CODEWITHSUNDEEP
javascriptthree.jsaframe
Kruspe
Kruspe

Reputation: 645

ThreeJS. Adding Nodes To Group

I am trying to store customPrimitive entities in a group. The problem is: The entity is creating its geometry itself by loading a file, so I would need to store just the node. My code is

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);                  // -^
 }

How can one achive this? Fiddle: https://jsfiddle.net/zrept6wf/2/

Upvotes: 1

Views: 270

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14655

The entity needs to be appended to the DOM to initialize. In other words, you have to do

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

for a-foo to fully initialize - if you want to use primitives you have to do it first before you could grab the object3D reference and add it to a group.

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

If you only want a group of meshes - consider creating them in a custom component instead of using aframe primitives. Or maybe preload just the geometry, and overwrite the default one in a-foo.

Upvotes: 2

Related Questions