Comment puis-je accéder aux attributs de bufferGeometry à partir d'un composant A-Frame

Question

J'écris un composant qui doit accéder et modifier les attributs position, normal et uv sur un modèle lu dans A-Frame en tant qu'actif. Je peux me rapprocher de l'accès aux données, mais je ne peux pas vraiment y arriver. L'utilisation:

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

semble me donner un tableau, mais en essayant d'accéder aux éléments me donne un objet avec des enfants vides et la géométrie vide.

Je pense que je suis en train d'accéder aux données par la mauvaise porte et tout:

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

me montre une taille de tableau = 1 avec un élément peuplé d'objets

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

donne moi l'élément avec le géo vide, etc. Quel est le bon mécanisme ou syntaxe à utiliser pour obtenir les données?

Answer 1

Il y a deux classes three.js dont vous aurez besoin de savoir ici: Geometry et BufferGeometry. Le premier a déjà des propriétés pour geometry.vertices et geometry.faces (voir la documentation ici). Les sommets sont un tableau d'objets TROIS.Vertex3, et faciles à utiliser.

Si vous avez un BufferGeometry, puis à la place que vous avez geometry.attributes.position qui est pas un tableau de THREE.Vertex3, mais contient plutôt un tableau associatif de chars, comme [x1, y1, z1, x2, y2, ...]. C'est plus efficace, mais plus difficile à modifier manuellement.

Si vous avez BufferGeometry mais préférez travailler avec la géométrie, vous pouvez convertir ou l'autre manière:

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

Un A-Frame note spécifique, vous obtenez habituellement une référence au maillage en faisant el.getObject3D('mesh'). Pour les modèles personnalisés qui pourraient être un groupe imbriqué, auquel cas:

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

(Three.js R84)