# 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:** 1\
**Showing post:** 6

<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)

---

_[View the full topic](https://discourse.threejs.org/t/implement-the-different-color-for-each-face-of-the-shape-which-is-made-by-extrude-geometry/75673)._
