Assign different colors to different parts of BufferGeometry

I still don’t know exactly what @Vimal_Rathod wants to achieve. But since its fiddle is forked by my example, you can easily add it.

The lines for the groups are only commented out in fiddle and have to be designed like this.

for ( var f = 0, p = 0; f < faceCount; f ++, p += 6) {
	
	g.addGroup( p, 6, f % 8 );
	
}

Then use multi material:

var material = [

	new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide} ),
	new THREE.MeshBasicMaterial( { color: 0xff0000, side: THREE.DoubleSide} ),
	new THREE.MeshBasicMaterial( { color: 0xffffff, side: THREE.DoubleSide} ),
	new THREE.MeshBasicMaterial( { color: 0x00ffff, side: THREE.DoubleSide} ),
	new THREE.MeshBasicMaterial( { color: 0x00ff00, side: THREE.DoubleSide} ),
	new THREE.MeshBasicMaterial( { color: 0xffff00, side: THREE.DoubleSide} ),
	new THREE.MeshBasicMaterial( { color: 0x0000ff, side: THREE.DoubleSide} ),
	new THREE.MeshBasicMaterial( { color: 0xff00ff, side: THREE.DoubleSide} )
	
];

in function animate:

g.groups[ getRandomInt( faceCount - 1 ) ].materialIndex = getRandomInt( 7 );

g.groupsNeedUpdate = true; // to change materialIndex for multi material

You get what you see above in the short video. :slightly_smiling_face:


Watch now live in the collection: http://discourse.threejs.hofk.de/2019/ColorStripeChanging/ColorStripeChanging.html