Simply change the color of a cube

I simply would like to change the color of the face of a cube (bufferGeometry) :

The question has been asked here but is not really answered :

Do I have to create a bufferAttribute and add it to a geometry as a color attribute ?

Short answer: No.

Long answer: Well, you can add color with a color attribute, but for cubes there is an easier way. Instead of single material, set the cube material to be an array of 6 materials. Each of them will correspond to one of the sides. Then you only have to change the color of one of the materials in this array.

Here is an example, where every second the faces of a cube are colored randomly:


1 Like

i am assuming you want to change it in the sandbox you’ve posted?

in that case drei/Box is a rounded box not a cube, it is a lot more complicated and has more faces.

but you can do this

  <boxGeometry />
  <meshStandardMaterial attach="material-0" color="hotpink" />
  <meshStandardMaterial attach="material-1" color="peachpuff" />
  <meshStandardMaterial attach="material-2" color="lightblue" />
  <meshStandardMaterial attach="material-3" color="indianred" />
  <meshStandardMaterial attach="material-4" color="aquamarine" />
  <meshStandardMaterial attach="material-5" color="orange" />

or, shorter

const colors = ["hotpink", "peachpuff", "lightblue", "indianred", "aquamarine", "orange"]

  <boxGeometry />
  {, i) => <meshStandardMaterial key={i} attach={`material-${i}`} color={color} />}
1 Like