# Creation of complex polygons following the pattern of Geojson polygon and multipolygon

**URL:** <https://discourse.threejs.org/t/creation-of-complex-polygons-following-the-pattern-of-geojson-polygon-and-multipolygon/17295>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [July 21, 2020, 9:03pm UTC](https://discourse.threejs.org/t/creation-of-complex-polygons-following-the-pattern-of-geojson-polygon-and-multipolygon/17295 "2020-07-21T21:03:09Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mazarhan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mazarhan/32/9262_2.png) [@Mazarhan](https://discourse.threejs.org/u/Mazarhan)\
**Post date:** [July 21, 2020, 9:03pm UTC](https://discourse.threejs.org/t/creation-of-complex-polygons-following-the-pattern-of-geojson-polygon-and-multipolygon/17295/1 "2020-07-21T21:03:09Z")

</div>

Hello, currently I am working on three.js project which would allow user create, edit and view Geojson layer on map layer. Unfortunately I was not able to figure out how to create any complex polygons such as self intersecting polygons and boolean operations on polygons (both shapes and holes) which are needed to visualize geojson polygon and multipolygon.

Here are some expected results captured from [https://geojson.io/](https://geojson.io/)

Self intersected polygon  
 ![selfintersectedpolygon](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/e/eaf68a60270be5381500dfd5b519bf56b33a6da3.png)

Binary operation between shape and holes

 ![complexpolygon](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/7a67c80a2145516e4759e2b640eade389882eb9a.png)  
Keep on mind that holes them selfs are creating new areas via binary operation.

Here is example of geojson which i need visualize in three.js  
[map.geojson](https://discourse.threejs.org/uploads/short-url/z2bRsnFnj8sFSHKLfPowWgepd10.geojson) (1.1 KB)

Thank you in advance for any help or hints!

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [July 21, 2020, 10:23pm UTC](https://discourse.threejs.org/t/creation-of-complex-polygons-following-the-pattern-of-geojson-polygon-and-multipolygon/17295/2 "2020-07-21T22:23:49Z")

</div>

What you’re probably looking for is a triangulation library, like [delaunator](https://github.com/mapbox/delaunator) or [earcut](https://github.com/mapbox/earcut). In order to visualize geojson in three.js, you will have to slice it up into triangles without self-intersection or holes. Earcut is the place to start I think.

---

<div class="post-metadata">

**Author:** ![Mazarhan](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mazarhan/32/9262_2.png) [@Mazarhan](https://discourse.threejs.org/u/Mazarhan)\
**Post date:** [July 30, 2020, 10:02am UTC](https://discourse.threejs.org/t/creation-of-complex-polygons-following-the-pattern-of-geojson-polygon-and-multipolygon/17295/3 "2020-07-30T10:02:31Z")

</div>

Thanks for advice. I solved my issue by slicing complex polygons to simple polygons with @turf/unkink-polygon lib.