# How to colour a mesh geometry by faces and not vertecies

**URL:** <https://discourse.threejs.org/t/how-to-colour-a-mesh-geometry-by-faces-and-not-vertecies/55838>\
**Category:** Questions\
**Tags:** textures, geometry\
**Created:** [September 9, 2023, 7:08pm UTC](https://discourse.threejs.org/t/how-to-colour-a-mesh-geometry-by-faces-and-not-vertecies/55838 "2023-09-09T19:08:18Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Paschal\_Asobirionwu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paschal_asobirionwu/32/37001_2.png) [@Paschal\_Asobirionwu](https://discourse.threejs.org/u/Paschal_Asobirionwu)\
**Post date:** [September 9, 2023, 7:08pm UTC](https://discourse.threejs.org/t/how-to-colour-a-mesh-geometry-by-faces-and-not-vertecies/55838/1 "2023-09-09T19:08:18Z")

</div>

I’m pretty much trynna do this: [How to disable color interpolation when using vertexColors?](https://discourse.threejs.org/t/how-to-disable-color-interpolation-when-using-vertexcolors/29006/1) but since the original question has no answer I’m asking again as it seems like a problem that should have an easily accessible solution that begginers should be able to understand.

One more thing i would like to ask the three.js community is why is the data accessible from a meshGeometry been limited so much when bufferedGeometries where removed? I keep getting redirected to this post talking about the performance benefits: [THREE.Geometry will be removed from core with r125](https://discourse.threejs.org/t/three-geometry-will-be-removed-from-core-with-r125/22401/1) but it just feels wierd not having any face information of a mesh.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [September 9, 2023, 7:25pm UTC](https://discourse.threejs.org/t/how-to-colour-a-mesh-geometry-by-faces-and-not-vertecies/55838/2 "2023-09-09T19:25:18Z")

</div>

Is this demo relevant?

[https://codepen.io/boytchev/full/GRwMdPj](https://codepen.io/boytchev/full/GRwMdPj)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/2/b27caa2688f0e627024f0e52460b5de3070fc0a5.jpeg)  
 ](https://codepen.io/boytchev/full/GRwMdPj)

_Note: left image – interpolated vertex colors; right image – clear face colors (actually, not, these are again vertex colors, but each face is colored individually)_

---

<div class="post-metadata">

**Author:** ![Paschal\_Asobirionwu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paschal_asobirionwu/32/37001_2.png) [@Paschal\_Asobirionwu](https://discourse.threejs.org/u/Paschal_Asobirionwu)\
**Post date:** [September 9, 2023, 7:31pm UTC](https://discourse.threejs.org/t/how-to-colour-a-mesh-geometry-by-faces-and-not-vertecies/55838/3 "2023-09-09T19:31:04Z")

</div>

yhea that looks good any idea on how to get the same effect with react-three/fiber?

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [September 9, 2023, 7:36pm UTC](https://discourse.threejs.org/t/how-to-colour-a-mesh-geometry-by-faces-and-not-vertecies/55838/4 "2023-09-09T19:36:37Z")

</div>

Sorry, I don’t do R3F. I hope that some of the R3F gurus will answer, but there are rumors, that any pure Three.js can be used within R3F.

---

<div class="post-metadata">

**Author:** ![Paschal\_Asobirionwu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paschal_asobirionwu/32/37001_2.png) [@Paschal\_Asobirionwu](https://discourse.threejs.org/u/Paschal_Asobirionwu)\
**Post date:** [September 9, 2023, 7:38pm UTC](https://discourse.threejs.org/t/how-to-colour-a-mesh-geometry-by-faces-and-not-vertecies/55838/5 "2023-09-09T19:38:23Z")

</div>

thanks anyways that was exactly what I was looking for

---

<div class="post-metadata">

**Author:** ![Paschal\_Asobirionwu](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/paschal_asobirionwu/32/37001_2.png) [@Paschal\_Asobirionwu](https://discourse.threejs.org/u/Paschal_Asobirionwu)\
**Post date:** [September 9, 2023, 7:59pm UTC](https://discourse.threejs.org/t/how-to-colour-a-mesh-geometry-by-faces-and-not-vertecies/55838/6 "2023-09-09T19:59:54Z")

</div>

just for future reference found how to do the same in r3f

```javascript
export const Component = () => {
    const meshRef = useRef();

    useEffect(() => {
        meshRef.current.geometry = meshRef.current.geometry.toNonIndexed( );
    }, [meshRef])

    return (
        <mesh ref={meshRef} >
            ...
        </mesh>
    );

}

```

ps: this is very much a hack but hopefully someone can build on it as it’s good enough for my usecase