how do I access the attributes of bufferGeometry from an an A-Frame component

Question

I am writing a component that needs to access and modify position, normal, and uv attributes on a model read into A-Frame as an asset. I can get close to accessing the data, but can't quite get there. Using:

document.querySelector('a-entity').object3D.children

seems to give me an array, but trying to access the elements gives me an object with empty children and empty geometry.

My guess is that I'm trying to access the data through the wrong door and while:

console.log(document.querySelector('a-entity').object3D.children);

shows me an array size=1 with a populated Object element

console.log(document.querySelector('a-entity').object3D.children[0]);

gives me the element with the empty geo, etc. What is the right mechanism or syntax to use to get at the data?

Answer 1

There are two three.js classes you'll need to know about here: Geometry and BufferGeometry. The former already has properties for geometry.vertices and geometry.faces (see documentation there). Vertices are an array of THREE.Vertex3 objects, and easy to work with.

If you have a BufferGeometry, then instead you have geometry.attributes.position which is not an array of THREE.Vertex3, but instead contains a flat array of floats, like [x1, y1, z1, x2, y2, ...]. This is more efficient, but harder to modify manually.

If you have BufferGeometry but would rather work with Geometry, then you can convert either way:

var geometry = Geometry.fromBufferGeometry( mesh.geometry );
mesh.geometry =  BufferGeometry.fromGeometry( geometry );

An A-Frame specific note, usually you'll get a reference to the mesh by doing el.getObject3D('mesh'). For custom models that might be a nested group, in which case:

el.object3D.traverse(function(node) {
  if (node.geometry) { /* ... */ }
});

(three.js r84)