Three.js polygon triangulation fails in pseudo duplicate points

Question

In three.js there is a function triangulateShape(). Now I encountered a failure to triangulate polygons that are simplified using Javascript Clipper. Simplifyin

Answer 1

You could write a function that detects the duplicate vertices and moves them backward 1px to make them discrete(they no more share a common edge). This way there will be no more common edges and no errors are produced but the visual result still looks the same.

Kind of crude solution but it might work.

Answer 2

There are several issues with the triangulation solution used in three.js. There are several other javascript triangulation libraries available and it might very well be that in the future the current library will be exchanged for something else like for example earcut.js. There is a discussion about this here in this issue on GitHub.

Your issue of self intersecting edges is not a problem for earcut as is demonstrated in this multi viewer here.

---

If you already want to use a different triangulation solution in your project I would like to refer to a three.js triangulation library (an adapter) I made. The adapter allows connecting three other triangulation libraries seamlessly to your three.js project:

• earcut - earcut triangulation library
• poly2tri - poly2tri triangulation library
• libtess - libtess tessellation library

All you need to do is include the triangulation.js file:

<script src="triangulation.js"></script>

And set the library of your choosing using the setLibrary method:

THREE.Triangulation.setLibrary('earcut');

Depending on the library you choose you will obviously need to embed of the files for the library itself. Currently for libtess the additional tessy.js is needed which can be found in the repository.

Read more about the project here on GitHub.