# Irregular Polygon Shapes Facing Double Coloring Issue in Three.js

**URL:** <https://discourse.threejs.org/t/irregular-polygon-shapes-facing-double-coloring-issue-in-three-js/64292>\
**Category:** Questions\
**Tags:** buffergeometry, shapegeometry, mesh, materials, geometry\
**Created:** [April 19, 2024, 5:12am UTC](https://discourse.threejs.org/t/irregular-polygon-shapes-facing-double-coloring-issue-in-three-js/64292 "2024-04-19T05:12:12Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![sana\_rahman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sana_rahman/32/46936_2.png) [@sana\_rahman](https://discourse.threejs.org/u/sana_rahman)\
**Post date:** [April 19, 2024, 5:12am UTC](https://discourse.threejs.org/t/irregular-polygon-shapes-facing-double-coloring-issue-in-three-js/64292/1 "2024-04-19T05:12:12Z")

</div>

Hello everyone,

I’m encountering an issue with irregular polygon shapes in my three.js project. When I draw the shapes from certain directions, they exhibit a double coloring effect, resulting in an undesirable appearance. For example, when drawing the shape from the right side, it looks fine, but when drawn from the left, it displays a double color effect.

I’ve attached images to illustrate the problem.  
 ![Screenshot 2024-04-18 163740](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/5/656b1e5ba397303861deb78f80dd43facd38cd71.png)

here i draw the same shape in opposite direction  
 ![Screenshot 2024-04-18 163823](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/3/f32876ac6d27198caf724b6686fe231988d292bf.png)

Has anyone else encountered a similar issue with irregular polygon shapes in three.js? If so, how did you resolve it? I’d appreciate any insights or suggestions on how to fix this problem.

Thank you!

---

<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:** [April 19, 2024, 7:07am UTC](https://discourse.threejs.org/t/irregular-polygon-shapes-facing-double-coloring-issue-in-three-js/64292/2 "2024-04-19T07:07:00Z")

</div>

> [@sana\_rahman](#):
>
> I’d appreciate any insights or suggestions on how to fix this problem.

You could triangulate the polygon with [`Earcut`](https://threejs.org/docs/#api/en/extras/Earcut)– this will create a set of non-intersecting triangles. Then you can combine them in a mesh. This should solve the problem.

Here is one semitransparent irregular polygon from both sides:

---

<div class="post-metadata">

**Author:** ![sana\_rahman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sana_rahman/32/46936_2.png) [@sana\_rahman](https://discourse.threejs.org/u/sana_rahman)\
**Post date:** [April 22, 2024, 5:54am UTC](https://discourse.threejs.org/t/irregular-polygon-shapes-facing-double-coloring-issue-in-three-js/64292/3 "2024-04-22T05:54:40Z")

</div>

Thanks for the sugesstion @PavelBoytchev, but i dont want to eliminate any vertex. Still tired the approach,it wasn’t very applicable with my project, but greatly appreciated. 😀 😀 Thanks alot for the respond

---

<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:** [April 22, 2024, 7:29am UTC](https://discourse.threejs.org/t/irregular-polygon-shapes-facing-double-coloring-issue-in-three-js/64292/4 "2024-04-22T07:29:56Z")

</div>

> [@sana\_rahman](#):
>
> but i dont want to eliminate any vertex

I’m not sure I understand this. No vertices are being removed. If you could share the coordinates of the irregular pentagon in your image and I will try the with the triangulation.

---

<div class="post-metadata">

**Author:** ![sana\_rahman](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/sana_rahman/32/46936_2.png) [@sana\_rahman](https://discourse.threejs.org/u/sana_rahman)\
**Post date:** [April 23, 2024, 5:47am UTC](https://discourse.threejs.org/t/irregular-polygon-shapes-facing-double-coloring-issue-in-three-js/64292/5 "2024-04-23T05:47:07Z")

</div>

@PavelBoytchev Thanks a lot buddy it worked out, seems like i wasn’t using it properly, issue is resolved thanks a lot… 😊 😇  
for those encountring the same issue try this code, instead of using shape go use buffer geo.

> const v = coordinates.map(coord =\> new THREE.Vector3(coord.x, coord.y, coord.z));  
> const verticesFlat = v.reduce((acc, v) =\> acc.concat([v.x, v.y, v.z]), );  
> // Triangulate using Earcut  
> const earcutData = Earcut(verticesFlat, null, 3);  
> const indices = new Uint32Array(earcutData);  
> // Create BufferGeometry  
> const geo = new THREE.BufferGeometry();  
> geo.setIndex(new THREE.BufferAttribute(indices, 1));  
> geo.setAttribute(‘position’, new THREE.BufferAttribute(new Float32Array(verticesFlat), 3));  
> const polygon = new THREE.Mesh(  
> geo,  
> new THREE.MeshBasicMaterial({ color: “white”, side: THREE.DoubleSide, transparent: true, depthTest: false, opacity:0.05 })  
> );

Thanks again @PavelBoytchev