Manipulating ThreeJS: Incorporating Elements into a Group

Question

Manipulating ThreeJS: Incorporating Elements into a Group

I'm facing a challenge in storing customPrimitive entities within a group. The issue is that the entity generates its geometry internally by loading a file, so I only need to store the node itself. Below is my code snippet:

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 ideal
   // grp.appendChild(x);          // grp.appendChild is not a function
   // grp.add(x.object3D)          // Attempting to add an element without `object3D`
   // grp.add(x);                  // -^
 }

Any suggestions on how to achieve this? You can also find the Fiddle here: https://jsfiddle.net/zrept6wf/2/

javascript three.js aframe

Answer 1

Answer №1

To initiate the entity, it must be added to the DOM. In simpler terms, you need to

// preferably to the scene: 
this.el.sceneEl.appendChild(x);
// or anywhere else: 
document.body.appendChild(x);

In order for a-foo to fully initialize, you must first do this if you plan on using primitives. This step needs to be completed before accessing the object3D reference and adding it to a group.

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

If your goal is simply a group of meshes, consider creating them in a custom component instead of relying on A-Frame primitives. Alternatively, you could preload just the geometry and replace the default one in a-foo.

Answer 2

To initiate the entity, it must be added to the DOM. In simpler terms, you need to

// preferably to the scene: 
this.el.sceneEl.appendChild(x);
// or anywhere else: 
document.body.appendChild(x);

In order for a-foo to fully initialize, you must first do this if you plan on using primitives. This step needs to be completed before accessing the object3D reference and adding it to a group.

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

If your goal is simply a group of meshes, consider creating them in a custom component instead of relying on A-Frame primitives. Alternatively, you could preload just the geometry and replace the default one in a-foo.

Manipulating ThreeJS: Incorporating Elements into a Group

Answer №1

Similar questions

Include the script tags retrieved from an array

Transforming a file into an array using the FS module

Issue with module.exports entry in Webpack configuration causing errors

Plugin initialization cannot occur as the $scope DOM elements are still dynamic and not ready

What steps should I take to ensure that Vim properly formats the indentation for this JavaScript code?

What is causing JavaScript to pass the parameter name instead of the element?

Accessing a specific element within an array that has been nested within another array, using JavaScript

Moving from one page to another

Error: Type Error when using custom App and getInitialProps in Next.js

ReactJS: What is the best way to rearrange elements within an array stored in an object's property?

The rotation of the Torus object in Three.js is not centered around the 0z axis

Capture an image of a webpage and print it out

Utilizing jQuery DataTable with an AJAX call to retrieve data from a JSON

Converting PHP code to utilize AJAX in JS

Cease the act of sending submissions through JavaScript ajax requests

Error when spaces are present in the formatted JSON result within the link parameter of the 'load' function in JQuery

Ensure the initial value in the dropdown menu is automatically set to the first value in VueJs

Ensuring a button (class) is in active hover mode when the document loads

Using jQuery to select the child element of the parent that came before

Creating a Conditional "Retrieve Script File" Function in JavaScript Without Dependencies