Simply change the color of a cube

[amo]

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

Inverted stencil buffer (forked) - CodeSandbox

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

Changing face color of cube

I’m not sure what I’m doing wrong here since I’ve followed related questions on here and on stackoverflow, but when trying to change one of the face colors of my cube (BoxGeometry) I get this error: Uncaught TypeError: Cannot read property ‘0’ of undefined at createCube (crypto.js:111) at init (crypto.js:144) at crypto.js:151 Here’s that code snippet (where I create and try to change face color of my cube): function createCube() { //make cube var geometry = new THREE.BoxGeometry( faceSiz…

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

[PavelBoytchev]

@amo

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:

https://codepen.io/boytchev/full/abaKwzg

[drcmda]

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

<mesh>
  <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" />
</mesh>

or, shorter

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

<mesh>
  <boxGeometry />
  {colors.map((color, i) => <meshStandardMaterial key={i} attach={`material-${i}`} color={color} />}
</mesh>