Irregular Polygon Shapes Facing Double Coloring Issue in Three.js

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

here i draw the same shape in opposite direction
Screenshot 2024-04-18 163823

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!

You could triangulate the polygon with 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:

1 Like

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. :grinning: :grinning: Thanks alot for the respond

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.


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

const v = => 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(
new THREE.MeshBasicMaterial({ color: “white”, side: THREE.DoubleSide, transparent: true, depthTest: false, opacity:0.05 })

Thanks again @PavelBoytchev