# THREE.js triangulation

**URL:** <https://discourse.threejs.org/t/three-js-triangulation/76735>\
**Category:** Questions\
**Tags:** triangulation\
**Created:** [January 19, 2025, 4:50pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735 "2025-01-19T16:50:16Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 19, 2025, 4:50pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/1 "2025-01-19T16:50:16Z")

</div>

I currently have a set of vectors and would like to perform triangulation.  
I know there’s earcut but it only performs on 2D.  
My question is the following:  
if I have a custom shape or a set of vectors how can I get all the triangles coordinates (I guess it’s also named faces) of this shape.  
Thanks in advance

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 19, 2025, 5:32pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/2 "2025-01-19T17:32:12Z")

</div>

> [@JSmithOner](#):
>
> if I have a custom shape or a set of vectors how can I get all the triangles coordinates (I guess it’s also named faces) of this shape.

That is a very general formulation. How specifically is the shape described? Where do the vectors come from? Are they points on a surface?

I have carried out special triangulations.

[Addon for triangulation of implicit surfaces/ forms with holes](https://discourse.threejs.org/t/addon-for-triangulation-of-implicit-surfaces-forms-with-holes/8722)  
[Triangulation sphere with holes](https://discourse.threejs.org/t/triangulation-sphere-with-holes/8213)  
[Triangulation cylinder with holes](https://discourse.threejs.org/t/triangulation-cylinder-with-holes/9828)  
[Inner Geometry (Triangulation)](https://discourse.threejs.org/t/inner-geometry-triangulation/12565)

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 19, 2025, 5:45pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/3 "2025-01-19T17:45:52Z")

</div>

@hofk First thank you for your answer.  
The points represents a set of speakers positionned in space onto a convex hull (Sphere). I need to get speakers by triplets ( faces )

---

<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:** [January 19, 2025, 6:21pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/4 "2025-01-19T18:21:06Z")

</div>

> [@JSmithOner](#):
>
> I know there’s earcut but it only performs on 2D.

According the [documentation](https://threejs.org/docs/index.html#api/en/extras/Earcut) there is a third parameter `dim` that represents the dimension of the vertices. For 3D vertices you should be using `dim=3`. Have you tried whether 3D earcut works fine?

BTW, I’m not sure you actually need triangulation (i.e. I’m still struggling to understand what you actually want to do).

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 19, 2025, 6:32pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/5 "2025-01-19T18:32:17Z")

</div>

@PavelBoytchev thanks for your answer  
the documentation of earcut says

> Note that Earcut is a **2D** triangulation algorithm, and handles 3D data as if it was projected onto the XY plane (with Z component ignored).

I’m implementing the [VBAP alogrihtm](https://lib.tkk.fi/Diss/2001/isbn9512255324/article1.pdf) where a certain number of speakers are positionned onto a convex hull.The sound is then played on a set of three speakers (triplet).The triangulation algorithm would help me get the sets of speakers 3 by 3.Any ideas?

---

<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:** [January 19, 2025, 6:48pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/6 "2025-01-19T18:48:38Z")

</div>

> [@JSmithOner](#):
>
> get the sets of speakers 3 by 3

The link to the paper is not accessible to me. I do not understand “get the sets of speakers 3 by 3”. Somehow there must be some rule how to select 3x3 speakers out of all speakers. I have absolutely no idea what this rule might be. If you can formalize the rule of selection, then you might be able to translate it into code.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 19, 2025, 6:48pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/7 "2025-01-19T18:48:44Z")

</div>

> [@JSmithOner](#):
>
> The points represents a set of speakers positionned in space onto a convex hull (Sphere). I need to get speakers by triplets ( faces )

If I’m right, it’s this topic - isn’t it? [Working with Sphere](https://discourse.threejs.org/t/working-with-sphere/76305) 🤔

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 19, 2025, 6:49pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/8 "2025-01-19T18:49:39Z")

</div>

@hofk exactly

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 19, 2025, 6:51pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/9 "2025-01-19T18:51:06Z")

</div>

@PavelBoytchev if you have let’s say 4 speakers ( 4 points ) Then you have 2 sets of 3 speakers. just a simple triangulation but in 3D

---

<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:** [January 19, 2025, 6:55pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/10 "2025-01-19T18:55:34Z")

</div>

Still struggling. Am I close with this:

- you have a cloud of points in 3D space
- the points are on (or approximately on) the surface of an imaginary sphere
- you want to make a mesh of triangles using these points as vertices.

If this is the case, I’d suggest to try the [`ConvexGeometry`](https://threejs.org/docs/#examples/en/geometries/ConvexGeometry). If all points are on a sphere, then there are no internal points and all points will all take part in the convex hull … which is made of triangles.

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 19, 2025, 7:00pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/11 "2025-01-19T19:00:33Z")

</div>

@PavelBoytchev so yes all the points are onto the convex hull but my question is how can I get all the coordinates of one mesh of the geometry?thanks

---

<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:** [January 19, 2025, 7:02pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/12 "2025-01-19T19:02:36Z")

</div>

Generally the coordinates of all vertices of a mesh are stored in the `position` attribute of its geometry. You can get this data and retrieve the XYZ of each vertex.

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 19, 2025, 7:05pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/13 "2025-01-19T19:05:26Z")

</div>

@PavelBoytchev I know that but I need the vertices of one mesh by one mesh.I don’t need only the vertices.

---

<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:** [January 19, 2025, 7:11pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/14 "2025-01-19T19:11:29Z")

</div>

I’m sorry. My confusion increases exponentially. I do not understand this “one mesh by one mesh”. I do not understand how knowing vertex position will help you with triangulation. I do not understand how 4 speakers will make 2 sets of three speakers (as I can see 4 sets of 3 speakers each – the number of faces of tetrahedron). As I’m not native English speaker, it is most likely my fault for this misunderstanding. Again, I’m sorry. I hope someone could provide adequate help.

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 19, 2025, 7:21pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/15 "2025-01-19T19:21:27Z")

</div>

![explanation](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/1/81b2337a2ea4ed0e18c0b6b5054b05a4d8e8108b.jpeg)  
@PavelBoytchev I’ll try one last time  
I need the coordinates of each triangles vertices ( first triangle [[x, y, z],[x,y,z],[x,y,z]] then second triangle [[x, y, z],[x,y,z],[x,y,z]]) THanks in advance, if you don’t understand I won’t bother.

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 19, 2025, 7:23pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/16 "2025-01-19T19:23:02Z")

</div>

@hofk I’ve looked a bit sounds great but how can I install it I don’t see any npm packages (I guess I need to import the script in my project). Isn’t there a more lightweight solution, I will use that in a commercial app so I hope the licence is MIT? Thanks

---

<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:** [January 19, 2025, 7:57pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/17 "2025-01-19T19:57:23Z")

</div>

This demo defines randomly N positions on a sphere (the speakers), then builds a triangular mesh from their positions and finally shows one by one the triangles (marking their vertices with red spheres).

[https://codepen.io/boytchev/full/emOjwOB](https://codepen.io/boytchev/full/emOjwOB)

[![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/4/845490ecf4626ffd9d37f14b9827eca9a6370256.png)](https://codepen.io/boytchev/full/emOjwOB)

---

<div class="post-metadata">

**Author:** ![JSmithOner](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jsmithoner/32/21349_2.png) [@JSmithOner](https://discourse.threejs.org/u/JSmithOner)\
**Post date:** [January 19, 2025, 8:00pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/18 "2025-01-19T20:00:22Z")

</div>

@PavelBoytchev I guess this is exactly what I need. I’ll dive into the code and once understood I’ll mark that as a solution.You have done this just for me or is this an already made script?If you have done this just for me I really appreciate that.Thank you a lot

---

<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:** [January 19, 2025, 8:04pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/19 "2025-01-19T20:04:27Z")

</div>

I did it just now to show what I mean by using `ConvexGeometry` and its `position` attribute.

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [January 19, 2025, 8:09pm UTC](https://discourse.threejs.org/t/three-js-triangulation/76735/20 "2025-01-19T20:09:31Z")

</div>

> [@JSmithOner](#):
>
> ow can I install it I don’t see any npm packages (I guess I need to import the script in my project)

There are different variants:

See the examples e.g.

[THREEi.js/examples/InnerGeometryTHREEi\_01.html at 6864a2786ca533edb59fb0bccf1df6bab1b664b9 · hofk/THREEi.js · GitHub](https://github.com/hofk/THREEi.js/blob/6864a2786ca533edb59fb0bccf1df6bab1b664b9/examples/InnerGeometryTHREEi_01.html)  
[THREEi.js/examples/sphereWithHolesTHREEi.html at 6864a2786ca533edb59fb0bccf1df6bab1b664b9 · hofk/THREEi.js · GitHub](https://github.com/hofk/THREEi.js/blob/6864a2786ca533edb59fb0bccf1df6bab1b664b9/examples/sphereWithHolesTHREEi.html)

\< script src=“…/js/THREEi.js”\>\< /script\>

or as function see e.g. [TriangulationSphereWithHoles](https://hofk.de/main/threejs/Triangulation/TriangulationSphereWithHoles.html)

* * *

> [@JSmithOner](#):
>
> so I hope the licence is MIT?

Yes, see there: [GitHub - hofk/THREEi.js: three.js addon for triangulation of implicit surfaces and for forms with holes. The addon generates indexed BufferGeometries.](https://github.com/hofk/THREEi.js)

"_THREEi_  
_three.js addon for triangulation of implicit surfaces and for forms with holes. The addon generates indexed BufferGeometries._

_License identical to three.js_ "

[Next page](https://discourse.threejs.org/t/three-js-triangulation/76735.md?page=2)