three.js - 如何从 A-Frame 组件访问 bufferGeometry 的属性

Question

我正在编写一个组件，该组件需要访问和修改作为 Assets 读入 A-Frame 的模型上的位置、法线和 uv 属性。我可以接近访问数据，但不能完全到达那里。使用:

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

似乎给了我一个数组，但试图访问元素给了我一个带有空子对象和空几何的对象。

我的猜测是我试图通过错误的门访问数据，同时:

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

向我展示了一个 size=1 的数组，其中包含一个已填充的 Object 元素

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

给我带有空 geo 的元素等。用于获取数据的正确机制或语法是什么？

Answer 1

这里有两个 three.js 类你需要知道:Geometry和 BufferGeometry .前者已经具有 geometry.vertices 和 geometry.faces 的属性(请参阅此处的文档)。顶点是三个 Vertex3 对象的数组，易于使用。

如果您有 BufferGeometry，那么您有 geometry.attributes.position，它不是一个 THREE.Vertex3 数组，而是包含一个平面 float 组，比如 [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)