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.
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: https://threejs.org/docs/#api/en/core/BufferGeometry.groups
don’t confuse it with THREE.Group, there are different things.
