Irregular Polygon Shapes Facing Double Coloring Issue in Three.js

Questions
, , , ,
1

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!

2

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
3

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

4

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.

2 Likes
5

@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 = 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

2 Likes