Как получить доступ к атрибутам bufferGeometry из компонента A-Frame

Question

Я пишу компонент, которому требуется доступ и изменение атрибутов позиции, нормального и ультрафиолетового излучения в модели, считываемой в A-Frame как актив. Я могу приблизиться к доступу к данным, но не могу добраться до них. С помощью:

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

кажется, дает мне массив, но попытка доступа к элементам дает мне объект с пустыми дочерними элементами и пустой геометрией.

Я предполагаю, что я пытаюсь получить доступ к данным не в ту дверь и пока:

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

показывает мне размер массива =1 с заполненным элементом Object

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

дает мне элемент с пустым гео и т. д. Какой правильный механизм или синтаксис использовать, чтобы получить данные?

Answer 1

Здесь вам нужно знать два класса three.js: Geometry и BufferGeometry. У первого уже есть свойства для geometry.vertices а также geometry.faces (см. документацию там). Вершины - это массив объектов THREE.Vertex3, с которыми легко работать.

Если у вас есть BufferGeometry, то вместо этого у вас есть geometry.attributes.position который не является массивом THREE.Vertex3, но вместо этого содержит плоский массив с плавающей точкой, например [x1, y1, z1, x2, y2, ...], Это более эффективно, но сложнее изменить вручную.

Если у вас есть BufferGeometry, но вы предпочитаете работать с Geometry, то вы можете выполнить преобразование любым из следующих способов:

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

A-Frame-примечание, обычно вы получите ссылку на сетку, выполнив el.getObject3D('mesh'), Для пользовательских моделей, которые могут быть вложенной группой, в этом случае:

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

(three.js r84)