# Implement the different color for each face of the shape which is made by extrude geometry

**URL:** <https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673>\
**Category:** Questions\
**Tags:** extrude-geometry\
**Created:** [December 26, 2024, 9:49am UTC](https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673 "2024-12-26T09:49:48Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ningomba](https://avatars.discourse-cdn.com/v4/letter/n/5e9695/32.png) [@Ningomba](https://discourse.threejs.org/u/Ningomba)\
**Post date:** [December 26, 2024, 9:49am UTC](https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673/1 "2024-12-26T09:49:48Z")

</div>

![Screenshot 2024-12-26 at 3.16.23 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/f/efa2d543579862d820f4468322184998394a5e7d.png)  
This is the right triangle shape which is made by extrude geometry. So i want to implement the different color for each faces. But i get the difficulties because it is made by extrude geometry, it gives only two face main faces and extrude faces. So please help me to implement this. And is it possible to implement the different color for each face of the shape made by the extrude geometry?

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [December 26, 2024, 10:48am UTC](https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673/2 "2024-12-26T10:48:50Z")

</div>

Do you need something like this?

 ![2024-12-26 11.39.27](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/9/f97fd0bd530b15d7a0e29f9537c170dd2ddca70c.png)  
 ![2024-12-26 11.39.49](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/b/2beaeb8e035e9d85f849b102262a24b52ee11c3f.png)  
 ![2024-12-26 11.40.17](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/e/7/e703bd5d6ec09cb5786bafb8bf1003d24db80676.png)

You can create the geometry with it: [Construction of frames with contour/profile](https://discourse.threejs.org/t/construction-of-frames-with-contour-profile/13490)

 ![2024-12-26 11.48.02](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/2/5/2504e58663e6889dfd85ac2fd332e9c74316f54b.png)  
 ![2024-12-26 11.47.12](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/3/7354375436bd8923ac9f04e200e697fce4ee0871.png)

---

<div class="post-metadata">

**Author:** ![Ningomba](https://avatars.discourse-cdn.com/v4/letter/n/5e9695/32.png) [@Ningomba](https://discourse.threejs.org/u/Ningomba)\
**Post date:** [December 26, 2024, 11:07am UTC](https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673/3 "2024-12-26T11:07:57Z")

</div>

Yes i want to implement like this.  
Thank you for your response

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [December 26, 2024, 1:51pm UTC](https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673/4 "2024-12-26T13:51:50Z")

</div>

You can also create a self-defined geometry. You only need 6 easy-to-define points and a total of 8 triangles. This is similar to these examples

[BufferGeometryIndexed](https://hofk.de/main/discourse.threejs/2022/BufferGeometry/BufferGeometryIndexed.html)  
[BufferGeometryNonIndexed](https://hofk.de/main/discourse.threejs/2022/BufferGeometry/BufferGeometryNonIndexed.html)

from the [Collection of examples from discourse.threejs.org](https://discourse.threejs.org/t/collection-of-examples-from-discourse-threejs-org/4315) .

---

<div class="post-metadata">

**Author:** ![Ningomba](https://avatars.discourse-cdn.com/v4/letter/n/5e9695/32.png) [@Ningomba](https://discourse.threejs.org/u/Ningomba)\
**Post date:** [December 26, 2024, 4:32pm UTC](https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673/5 "2024-12-26T16:32:14Z")

</div>

@hofk  
I am successfully creating the right triangular shape. So when I apply color for the shape, it is working but when i apply the color for each face It is not woking. Please see the bellow code:  
import \* as THREE from ‘three’;  
import { OrbitControls } from “three/examples/jsm/controls/OrbitControls.js”;

// Create a scene  
const scene = new THREE.Scene();

const axesHelper = new THREE.AxesHelper( 5 );  
scene.add( axesHelper );

// Set up the camera  
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);  
camera.position.z = 20;

// Create a renderer and append it to the DOM  
const renderer = new THREE.WebGLRenderer();  
renderer.setSize(window.innerWidth, window.innerHeight);  
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

// Define the vertices of a right triangle  
const vertices = new Float32Array([  
// Front face  
-2.5, -2.5, -2.5,  
-2.5, 2.5, -2.5,  
2.5, -2.5, -2.5,  
2.5, -2.5, 2.5,

// Back face  
-2.5, 2.5, 2.5,  
-2.5, -2.5, 2.5,  
-2.5, -2.5, -2.5,  
2.5, -2.5, -2.5,

// Top face  
-2.5, -2.5, 2.5,  
2.5, -2.5, -2.5,  
2.5, -2.5, 2.5,  
-2.5, -2.5, 2.5,

// Bottom face  
2.5, -2.5, -2.5,  
-2.5, 2.5, -2.5,  
2.5, -2.5, 2.5,  
-2.5, 2.5, -2.5,

// Right face  
-2.5, 2.5, 2.5,  
2.5, -2.5, 2.5,  
-2.5, 2.5, -2.5,  
-2.5, -2.5, -2.5,

// Left face  
-2.5, 2.5, 2.5,  
-2.5, -2.5, -2.5,  
-2.5, -2.5, 2.5,  
-2.5, 2.5, 2.5,  
]);

// Create a BufferGeometry and set the attributes  
const geometry = new THREE.BufferGeometry();  
geometry.setAttribute(‘position’, new THREE.BufferAttribute(vertices, 3)); // 3 values per vertex

// Create a material for the rightTriangle  
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });

// const materials = [  
// new THREE.MeshBasicMaterial({ color: 0xff0000 }), // Red  
// new THREE.MeshBasicMaterial({ color: 0x00ff00}), // Green  
// new THREE.MeshBasicMaterial({ color: 0x0000ff}), // Blue  
// new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Yellow  
// new THREE.MeshBasicMaterial({ color: 0xff00ff }) // Magenta  
// ];

// Create the mesh using the geometry and material  
const rightTriangle = new THREE.Mesh(geometry, material);

// Add the rightTriangle to the scene  
scene.add(rightTriangle);

// Create the animation loop  
function animate() {  
requestAnimationFrame(animate);

// Rotate the cube for a simple animation  
// rightTriangle.rotation.x += 0.01;  
// rightTriangle.rotation.y += 0.01;

controls.update();

// Render the scene  
renderer.render(scene, camera);  
}

animate();

 ![Screenshot 2024-12-26 at 9.59.24 PM](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/d/dd242f0c56d9c6004b5a343211e212a0bfc31582.png)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [December 26, 2024, 5:37pm UTC](https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673/6 "2024-12-26T17:37:12Z")

</div>

The vertices are not correct. You need 3 x 3 values per triangle, whereby the rotation must be counterclockwise when viewed from the outside.

 ![2024-12-26 18.30.00](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/7/f/7f33a8d5126ecb14e75865bf067ece0d560afee9.png)  
 ![2024-12-26 18.30.30](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/a/da805d6d275254dc65031df01ec4f0242b9d52b2.png)

```javascript

<!DOCTYPE html>
<head>
  <title>Prism</title>
  <meta charset="utf-8" />
    <style>
    body {
        overflow: hidden;
        margin: 0;
    }
    </style>
</head>

<body> </body>
<script type="module">
import * as THREE from "../jsm/three.module.167.js";
import { OrbitControls } from "../jsm/OrbitControls.167.js";

// Create a scene
const scene = new THREE.Scene();

const axesHelper = new THREE.AxesHelper( 5 );
scene.add( axesHelper );

// Set up the camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 20;

// Create a renderer and append it to the DOM
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new OrbitControls(camera, renderer.domElement);

// Define the vertices of a right triangle
const vertices = new Float32Array([
// Front face
-2.5, -2.5, 2.5,
2.5, -2.5, 2.5,
-2.5, 2.5, 2.5,
 
// Back face
-2.5, -2.5, -2.5,
-2.5, 2.5, -2.5,
2.5, -2.5, -2.5,

/* ****Needs to be corrected***************************
// Top face
-2.5, -2.5, 2.5,
2.5, -2.5, -2.5,
2.5, -2.5, 2.5,
-2.5, -2.5, 2.5,

// Bottom face
2.5, -2.5, -2.5,
-2.5, 2.5, -2.5,
2.5, -2.5, 2.5,
-2.5, 2.5, -2.5,

// Right face
-2.5, 2.5, 2.5,
2.5, -2.5, 2.5,
-2.5, 2.5, -2.5,
-2.5, -2.5, -2.5,

// Left face
-2.5, 2.5, 2.5,
-2.5, -2.5, -2.5,
-2.5, -2.5, 2.5,
-2.5, 2.5, 2.5,
*/

]);

// Create a BufferGeometry and set the attributes
const geometry = new THREE.BufferGeometry();
geometry.setAttribute('position', new THREE.BufferAttribute(vertices, 3)); // 3 values per vertex

//geometry.addGroup( 0,

// Create a material for the rightTriangle
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // , wireframe: true 

//const materials = [
//new THREE.MeshBasicMaterial({ color: 0xff0000 }), // Red
//new THREE.MeshBasicMaterial({ color: 0x00ff00}), // Green
//new THREE.MeshBasicMaterial({ color: 0x0000ff}), // Blue
//new THREE.MeshBasicMaterial({ color: 0xffff00 }), // Yellow
//new THREE.MeshBasicMaterial({ color: 0xff00ff }) // Magenta
//];

// Create the mesh using the geometry and material
const rightTriangle = new THREE.Mesh(geometry, material);

// Add the rightTriangle to the scene
scene.add(rightTriangle);

// Create the animation loop
function animate() {
requestAnimationFrame(animate);

// Rotate the cube for a simple animation
//rightTriangle.rotation.x += 0.01;
//rightTriangle.rotation.y += 0.01;

controls.update();

// Render the scene
renderer.render(scene, camera);
}

animate();

</script>
</html>

```

It makes sense to use material groups for the different materials.

* * *

_.groups : Array_

_Split the geometry into groups, each of which will be rendered in a separate WebGL draw call. This allows an array of materials to be used with the geometry._

_Each group is an object of the form:_  
_{ start: Integer, count: Integer, materialIndex: Integer }_  
_where start specifies the first element in this draw call – the first vertex for non-indexed geometry, otherwise the first triangle index. Count specifies how many vertices (or indices) are included, and materialIndex specifies the material array index to use._

_Use .addGroup to add groups, rather than modifying this array directly._

* * *

see [three.js docs](https://threejs.org/docs/index.html?q=geome#api/en/core/BufferGeometry)

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 6, 2025, 7:14pm UTC](https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673/7 "2025-01-06T19:14:46Z")

</div>

Just came across this post again and noticed that there is no solution yet.

This is one possibility:

[Prism](https://hofk.de/main/discourse.threejs/2025/Prism/Prism.html)

 ![2025-01-06 19.59.38](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/9/4/94f13c85f3b84c06dc9fc894ac15756b8bb0dc44.png)

The code:

```javascript

<!DOCTYPE html>
<!-- https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673/6 -->

<head>
  <title>Prism</title>
  <meta charset="utf-8" />
    <style>
    body {
        overflow: hidden;
        margin: 0;
    }
    </style>
</head>

<body></body>

<script type="module">
import * as THREE from "../jsm/three.module.172.js";
import { OrbitControls } from "../jsm/OrbitControls.172.js";

const scene = new THREE.Scene( );

const axesHelper = new THREE.AxesHelper( 2.5 );
scene.add( axesHelper );
 
const camera = new THREE.PerspectiveCamera( 65, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 20;

const renderer = new THREE.WebGLRenderer( );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );

// define the vertices

// bottom
const A = [-2.5, -2.5, 2.5];
const B = [2.5, -2.5, 2.5];
const C = [2.5, -2.5, -2.5];
const D = [-2.5, -2.5, -2.5];
// top
const E = [-2.5, 2.5, 2.5];
const F = [-2.5, 2.5, -2.5];

const vert = [];

function pushV( V1, V2, V3 ) {
    vert.push( V1[0], V1[1], V1[2] );
    vert.push( V2[0], V2[1], V2[2] );
    vert.push( V3[0], V3[1], V3[2] ); 
}

// Front face
pushV( A, B, E );

// Back face
pushV( C, D, F );

// Left faces
pushV( A, E, F );
pushV( A, F, D );
 
// Bottom faces
pushV( A, C, B );
pushV( A, D, C );

// Top faces
pushV( E, B, C );
pushV( E, C, F );

const vertices = new Float32Array( vert );

const geometry = new THREE.BufferGeometry( );
geometry.setAttribute( 'position', new THREE.BufferAttribute( vertices, 3 ) ); // 3 values per vertex

// start, count, material Index
geometry.addGroup( 0, 3, 0 ); // 0 Front
geometry.addGroup( 3, 3, 1 ); // 1 Back
geometry.addGroup( 6, 6, 2 ); // 2 Left
geometry.addGroup( 12, 6, 3 ); // 3 Top
geometry.addGroup( 18, 6, 4 ); // 3 Bottom

const material = new THREE.MeshBasicMaterial( { color: 0xff0000 , wireframe: true } );   

const materials = [
    new THREE.MeshBasicMaterial( { color: 0xff0000 } ), // Red
    new THREE.MeshBasicMaterial( { color: 0x00ff00} ), // Green
    new THREE.MeshBasicMaterial( { color: 0x0000ff} ), // Blue
    new THREE.MeshBasicMaterial( { color: 0xffff00 } ), // Yellow
    new THREE.MeshBasicMaterial( { color: 0xff00ff } ) // Magenta
];

const prismWire = new THREE.Mesh( geometry, material );
const prism = new THREE.Mesh( geometry, materials );

scene.add( prism, prismWire );
 
function animate( ) {
    
    requestAnimationFrame(animate);
    
    // Rotate the cube for a simple animation
    prism.rotation.x += 0.01;
    prism.rotation.y += 0.01;
    
    controls.update( );
    
    renderer.render(scene, camera);
    
}

animate();

</script>
</html>

```

---

<div class="post-metadata">

**Author:** ![Ningomba](https://avatars.discourse-cdn.com/v4/letter/n/5e9695/32.png) [@Ningomba](https://discourse.threejs.org/u/Ningomba)\
**Post date:** [January 9, 2025, 10:13am UTC](https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673/8 "2025-01-09T10:13:05Z")

</div>

Tq very much.