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( faceSize, faceSize, faceSize );
	geometry.colorsNeedUpdate = true;

	geometry.faces[ 0 ].color.setHex = ETHColor; //face 1: ETH
    geometry.faces[ 1 ].color.setHex( BTCColor ); //face 2: BTC
    geometry.faces[ 2 ].color.setHex( DOGEColor ); //face 3: DOGE
    geometry.faces[ 3 ].color.setHex( Math.random() * 0xffffff );
    geometry.faces[ 4 ].color.setHex( Math.random() * 0xffffff );
    geometry.faces[ 5 ].color.setHex( Math.random() * 0xffffff );

    var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
	cube = new THREE.Mesh( geometry, material );

	//add to scene
	cube.position.set( 0, 0, 0 );
	scene.add( cube );

Let me know if you’d like to see more of the code, thank you!

The answers at stackoverflow are too old. BoxGeometry is now of type BufferGeometry. The following post provides some background information about that topic: THREE.Geometry will be removed from core with r125

BufferGeometry has no concept of faces, only vertex data managed as buffer attributes. The following example shows how you can work with a color buffer attribute in order to add vertex colors.

Notice that for unique face colors, each face requires its own set of vertices (meaning vertices can’t be shared across faces). This works only with so called “non-indexed” geometries. You can convert any indexed geometry to a non-indexed via BufferGeometry.toNonIndexed(). You definitely need this method in context of BoxGeometry since this particular geometry is indexed.

This is the code example they give. What are they doing with the vertices variable here? I thought a cube had 8 vertices, why are there 6? I’d create the BufferGeometry object, and then follow this same procedure? Once I want to change the colors of the faces though, how exactly would I do that?

6 vertices for two faces (one face defined with a triplet of consequent vertices).
To build a box, you have to either create 8 vertices and define faces with indices, or create 36 vertices (2 faces per side, 6 sides).
Take a look at the source code of BoxGeometry to know how the things work under the hood.

1 Like

Happily some time ago I wrote a recipe for this on my website. Here you have an example of how to assign color to box faces: Loopfoo ★ - How to assign color to mesh faces

Notice that I use groups here (Three.js automatically assigns groups when you create BoxGeometry - one group per one side of cube). Here more about groups:
don’t confuse it with THREE.Group, there are different things.

When I started using three.js, that’s exactly what I fell for. :slightly_frowning_face:

Similar terms for different facts are always a problem. Wouldn’t it be appropriate to specify the designations?

How about
Object3DGroup or ObjectGroup
to prettify the library?

Matching the suggestions THREE.MeshGeometry, THREE.LineGeometry and THREE.PointsGeometry @mrdoob.
THREE.Geometry will be removed from core with r125 - #15 by mrdoob