El tutorial o código que hallarás en este post es la resolución más eficiente y válida que hallamos a esta inquietud o dilema.
Solución:
BufferGeometries en three.js son fundamentalmente diferentes de las geometrías normales. No están orientados a la facilidad de manipulación, sino a cómo deben entregarse las mallas a la API de WebGL.
Dicho esto, no existe una noción explícita de “caras” para BufferGeometries, son implícitas. Una BufferGeometry consiste en un número de attributes (ver antecedentes aquí), uno de ellos es el position-attribute.
En un BufferGeometry regular (a diferencia de “indexado”), las caras se almacenan como secuencias de tres vértices dentro de ese attribute (algo como [x1, y1, z1, x2, y2, z2, x3, ...]así que para la primera cara position[0] es la componente x del primer vértice y position[8] es la componente z del tercer vértice). Todos los demás attributes utilice un esquema de indexación similar. Si defines un attribute color para la geometría, puede controlar los colores de las caras escribiendo el mismo valor de color en las posiciones de los tres vértices de las caras (entonces, en este ejemplo, un color-attribute con [r, g, b, r, g, b, r, g, b, ...] asignaría el mismo valor rgb a los tres vértices del primer triángulo).
Las geometrías indexadas son diferentes: en lugar de repetir los vértices para todos los triángulos, cada vértice se almacena solo una vez. Un adicional de attribute index se utiliza para conectar los vértices en triángulos. Así que un índice-attribute podría verse así: [0, 1, 2, 0, 2, 3, ...] que dice “construir el primer triángulo a partir de los vértices en las posiciones 0, 1 y 2” y así sucesivamente.
Como esta es una forma muy eficiente de almacenar geometrías, esta técnica se usa con la mayoría (quizás incluso con todas) de las geometrías integradas en three.js.
Con geometrías indexadas no es posible tener colores por cara-vértice porque el vértice debe tener el mismo color en todas partes donde se usa. Sin embargo, puede utilizar bufferGeometry.toNonIndexed() para convertir una geometría indexada en una normal.
Todo lo necesario aquí https://threejs.org/docs/index.html#api/en/core/BufferGeometry
Ver ejemplos: Malla con caras no indexadas, Malla con caras indexadas…
y creo que ese pequeño ejemplo será más útil:
const geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
const colorsAttr = geometry.attributes.position.clone();
// Faces will be colored by vertex colors
geometry.setAttribute('color', colorsAttr);
const material = new THREE.MeshBasicMaterial(
vertexColors: THREE.VertexColors
);
const cube = new THREE.Mesh( geometry, material );
Si haces scroll puedes encontrar las referencias de otros usuarios, tú asimismo eres capaz dejar el tuyo si te gusta.