I saw this post about using vertices to change the face colors of a BoxGeometry
object, but still am struggling to distinguish each face rather than coloring all 6 faces.
I currently have a Piece() class that creates a BoxGeometry
object and applies the following to color its sides:
const piece = new THREE.BoxGeometry(1,1,1).toNonIndexed();
const material = new THREE.MeshBasicMaterial( { vertexColors: true } );
const positionAttribute = piece.getAttribute( 'position' );
const colors = [];
const colorRed = new THREE.Color(0xff0000);
const colorWhite = new THREE.Color(0xffffff);
if (color == 'red') {
// set all sides of one cube red
// TODO set color depending on face type
for ( let i = 0; i < positionAttribute.count; i += 3) {
// define the same color for each vertex of a triangle
colors.push( colorRed.r, colorRed.g, colorRed.b );
colors.push( colorRed.r, colorRed.g, colorRed.b );
colors.push( colorRed.r, colorRed.g, colorRed.b );
} // for
// define the new attribute
piece.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
} // if
if (color == 'white') {
// TODO set color depending on face type
for ( let i = 0; i < positionAttribute.count; i += 3) {
// define the same color for each vertex of a triangle
colors.push( colorWhite.r, colorWhite.g, colorWhite.b );
colors.push( colorWhite.r, colorWhite.g, colorWhite.b );
colors.push( colorWhite.r, colorWhite.g, colorWhite.b );
} // for
// define the new attribute
piece.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
} // if
const cube = new THREE.Mesh(piece, material);
Any help is appreciated.