# Problems with creating custom polyhedron geometry

**URL:** <https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [December 18, 2018, 7:57pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412 "2018-12-18T19:57:29Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![shakena](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@shakena](https://discourse.threejs.org/u/shakena)\
**Post date:** [December 18, 2018, 7:57pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/1 "2018-12-18T19:57:29Z")

</div>

like to add a few new shapes to the build in - Three.js geometry library, like a rhombic dodecahedron, an cub octa and some more, how do i do that, cause i adjusted the DodecahedronGeometry.js file so it contains new vertices and new faces, yet i cannot load it in three.js, as a newby i dont know what to do to get these shapes working properly, any help would be apreciated, if we can slve this i am willing to share some more shapes to the standard library of three.js

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 19, 2018, 9:50am UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/2 "2018-12-19T09:50:44Z")

</div>

> [@shakena](#):
>
> as a newby i dont know what to do to get these shapes working properly,

In this case, it’s best when you create your models in Blender, export them as `glTF` and load them via `GLTFLoader`.

> [@shakena](#):
>
> if we can slve this i am willing to share some more shapes to the standard library of three.js

`three.js` only provides the [platonic solids](https://en.wikipedia.org/wiki/Platonic_solid) in the core based on `PolyhedronGeometry`. I don’t think we would accept a PR that adds more shapes to the lib. Maybe only if the code is part of the example. In any event, I personally think it’s better if you share your stuff differently (new github repo, codepen, fiddle etc.).

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 19, 2018, 12:14pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/3 "2018-12-19T12:14:03Z")

</div>

Crossposting:

> <https://stackoverflow.com/questions/53839148/problems-with-creating-custom-polyhedron-geometry>

---

<div class="post-metadata">

**Author:** ![CarlBateman](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@CarlBateman](https://discourse.threejs.org/u/CarlBateman)\
**Post date:** [December 19, 2018, 12:37pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/4 "2018-12-19T12:37:00Z")

</div>

It looks like DodecahedronGeometry is built into three.js, so you’d need to rebuild three.js locally.

Alternatively, change the variable names in your .js file then just include it with a script tag in your HTML (after three.js).

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 19, 2018, 12:41pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/5 "2018-12-19T12:41:37Z")

</div>

@CarlBateman 'm afraid your answer is not helpful. @shakena does not get the indices right for its [Rhombic dodecahedron](https://en.wikipedia.org/wiki/Rhombic_dodecahedron). Just have a look at the stackoverflow thread.

Demo: [https://jsfiddle.net/f2Lommf5/16750/](https://jsfiddle.net/f2Lommf5/16750/)

---

<div class="post-metadata">

**Author:** ![shakena](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@shakena](https://discourse.threejs.org/u/shakena)\
**Post date:** [December 19, 2018, 1:25pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/6 "2018-12-19T13:25:13Z")

</div>

I’m new to forums and asking for help this way… sry…

---

<div class="post-metadata">

**Author:** ![shakena](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@shakena](https://discourse.threejs.org/u/shakena)\
**Post date:** [December 19, 2018, 1:33pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/7 "2018-12-19T13:33:16Z")

</div>

thank you for showing me that indices error… will make an jsfiddle account to show my other shapes as well… thinking out loud, having next to the platonic solids also the archimedian solids would be nice… will work on my code and will share it through fiddle then you all can descide if it is a nice addition to the trhree.js standard library…

---

<div class="post-metadata">

**Author:** ![CarlBateman](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@CarlBateman](https://discourse.threejs.org/u/CarlBateman)\
**Post date:** [December 19, 2018, 1:35pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/8 "2018-12-19T13:35:41Z")

</div>

I missed the crosspost, but there seem to be two different issues:

1. incorrect vertices
2. including the code

I was trying to address the latter

Correct vertices should be

```
var vertices = [
    -1, -1, -1, 1, -1, -1,
     1, -1, 1, -1, -1, 1,
    -1, 1, -1, -1, 1, 1, // error here
     1, 1, 1, 1, 1, -1,

    0, 2, 0, 0, -2, 0,
    0, 0, -2, 0, 0, 2,
    2, 0, 0, -2, 0, 0
];
```

---

<div class="post-metadata">

**Author:** ![shakena](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@shakena](https://discourse.threejs.org/u/shakena)\
**Post date:** [December 19, 2018, 1:38pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/9 "2018-12-19T13:38:04Z")

</div>

its a rhombic dodecahedron, from the archimedian solids, but as Mugen87 showed… its indices are not properly coded, i did try to load it after three.js but it did not work when i did that…

---

<div class="post-metadata">

**Author:** ![CarlBateman](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@CarlBateman](https://discourse.threejs.org/u/CarlBateman)\
**Post date:** [December 19, 2018, 1:43pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/10 "2018-12-19T13:43:57Z")

</div>

Are you able to add a function as in the jsfiddle?

---

<div class="post-metadata">

**Author:** ![shakena](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@shakena](https://discourse.threejs.org/u/shakena)\
**Post date:** [December 19, 2018, 1:53pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/11 "2018-12-19T13:53:16Z")

</div>

i just made an account on jsfiddle and copied the code out of the example of Mugen87, its running locally now…yihaaa…!!!.

thank you both for helping me out…  
now i can confidently build my other shapes as well and use them… when all are ready i will present them to the forum as well in JsFiddle links… then Three.js masters can see if they want to add the archimedian solids to the standard library as well…

thank you both… this newby is very happy now its working…😉  
shakena out…

---

<div class="post-metadata">

**Author:** ![shakena](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@shakena](https://discourse.threejs.org/u/shakena)\
**Post date:** [December 19, 2018, 5:18pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/12 "2018-12-19T17:18:13Z")

</div>

there is still something seemingly wrong with the way Three.js calculates shapes.

the shape should exist from straight planes… 2 triangles together would make one straight plane…  
in maya it does… i used Maya3d to map the vertices and the indices… and in maya it does not show broken planes…  
according to wikipedia  
carthesian coordinates…

> **[Rhombic dodecahedron](https://en.wikipedia.org/wiki/Rhombic_dodecahedron)**
>
> In geometry, the rhombic dodecahedron is a convex polyhedron with 12 congruent rhombic faces. It has 24 edges, and 14 vertices of two types. It is a Catalan solid, and the dual polyhedron of the cuboctahedron.
> The rhombic dodecahedron is a zonohedron. Its polyhedral dual is the cuboctahedron. The long diagonal of each face is exactly √2 times the length of the short diagonal, so that the acute angles on each face measure arccos(1/3), or approximately 70.53°.
> Being the dual of an Archimedean pol...

_**The eight vertices where three faces meet at their obtuse angles have [Cartesian coordinates]**_  
_**(±1, ±1, ±1)**_  
_ **The coordinates of the six vertices where four faces meet at their acute angles are:** _  
_**(±2, 0, 0), (0, ±2, 0) and (0, 0, ±2)**_

so the vertices have the proper positions, yet the shading calculations seem a bit of cause they produce broken planes for this shape while it should be straight planes…???

_any ideas what is going wrong here_???

[https://jsfiddle.net/Shakena/4326c0xb/](https://jsfiddle.net/Shakena/4326c0xb/)

i coded a second shape, a cuboctahedron, it also has square planes, made up of triangles, yet it does not show broken planes…???

[https://jsfiddle.net/Shakena/7kst8par/](https://jsfiddle.net/Shakena/7kst8par/)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 19, 2018, 5:25pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/13 "2018-12-19T17:25:04Z")

</div>

> [@shakena](#):
>
> yet the shading calculations seem a bit of cause they produce broken planes for this shape while it should be straight planes…???

I’m not sure I understand. The shading of your first demo looks good. Keep in mind the demo uses [MeshNormalMaterial](https://threejs.org/docs/index.html#api/en/materials/MeshNormalMaterial).

---

<div class="post-metadata">

**Author:** ![shakena](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@shakena](https://discourse.threejs.org/u/shakena)\
**Post date:** [December 19, 2018, 7:33pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/14 "2018-12-19T19:33:54Z")

</div>

there is something wrong in Three.js in computing the objects, maybe it has something to do with webGL, i once read, it does not work well when you use values larger than 1 for shape generation…

i made another attempt on a different model The RhombicTriacontahedron…  
and made a jsfiddle for it…

[https://jsfiddle.net/Shakena/pf8yt9nL/11/](https://jsfiddle.net/Shakena/pf8yt9nL/11/)

as you can see in the code… plane A has all same Y values, yet three.js shows it not as a straight plane

---

<div class="post-metadata">

**Author:** ![shakena](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@shakena](https://discourse.threejs.org/u/shakena)\
**Post date:** [December 19, 2018, 7:50pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/15 "2018-12-19T19:50:53Z")

</div>

it also shows these bended/broken faces in a lambert shading… it should not do that…  
please look at this wikipedia image… it has no lines between the short distance on the plane… its just one straight plane between 4 vertices

> **[Rhombic dodecahedron](https://en.wikipedia.org/wiki/Rhombic_dodecahedron)**
>
> In geometry, the rhombic dodecahedron is a convex polyhedron with 12 congruent rhombic faces. It has 24 edges, and 14 vertices of two types. It is a Catalan solid, and the dual polyhedron of the cuboctahedron.
> The rhombic dodecahedron is a zonohedron. Its polyhedral dual is the cuboctahedron. The long diagonal of each face is exactly √2 times the length of the short diagonal, so that the acute angles on each face measure arccos(1/3), or approximately 70.53°.
> Being the dual of an Archimedean pol...

if you compare my shape with this wikipedia image, you see there is an extra line on the plane, between the vertices that are closest together… that i call a broken plane… it should not do that… in my latest fiddle it does it to… while it should not do it… all vertices of plane A have same value in Y, yet the three.js is showing it not as a straight plane… but as a plane made up of 2 triangles that are bended a bit down at the tips… while it should be a straight plane…

this is my latest fiddle… please see the top plane and the code… that does three.js do… the bending… maya does not do that…  
[https://jsfiddle.net/Shakena/pf8yt9nL/11/](https://jsfiddle.net/Shakena/pf8yt9nL/11/)

---

<div class="post-metadata">

**Author:** ![shakena](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@shakena](https://discourse.threejs.org/u/shakena)\
**Post date:** [December 19, 2018, 8:45pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/16 "2018-12-19T20:45:31Z")

</div>

think i found a bug in three.js… what now…???

---

<div class="post-metadata">

**Author:** ![CarlBateman](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@CarlBateman](https://discourse.threejs.org/u/CarlBateman)\
**Post date:** [December 19, 2018, 9:40pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/17 "2018-12-19T21:40:47Z")

</div>

Tip: use

```
 material = new THREE.MeshNormalMaterial({side:THREE.DoubleSide});

```

It makes things a bit easier to see.

When you say “straight plane” do you mean “flat”/“co-planar” and by “broken plane” do you mean “bent”?

The fiddle looks OK to me, by which I mean points that make “Plane A” are not co-planar, so it’s rendered as I’d expect. Using the alternative values below makes Plane A planar.

```
     0, l, s, // 8 plane A **try 0, l, 1**
     0, l, -s, // 9 plane A **try 0, l, -1**
     1, l, 0, // 20 plane A
    -1, l, 0, // 21 plane A

```

Bugs do occur, but they’re usually more obscure than this.

HTH

---

<div class="post-metadata">

**Author:** ![shakena](https://avatars.discourse-cdn.com/v4/letter/s/f07891/32.png) [@shakena](https://discourse.threejs.org/u/shakena)\
**Post date:** [December 20, 2018, 8:03am UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/18 "2018-12-20T08:03:14Z")

</div>

> [@CarlBateman](#):
>
> {side:THREE.DoubleSide}

thank you… but that does not solve it…  
the doublesided material… thx…

but when i change the vertex z value from s to 1, the top plane becomes a square and it should be a parallelogram like this image…  
[http://www.ieoie.nl/ImagesThree/triaConta.JPG](http://www.ieoie.nl/ImagesThree/triaConta.JPG)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 20, 2018, 9:20am UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/19 "2018-12-20T09:20:28Z")

</div>

> [@shakena](#):
>
> think i found a bug in three.js

I don’t think so. That’s not a bug in `three.js` but in your code. If I change `l` and `s` values to `1`, everything looks nice flat. There’s a problem with your input data.

> **[Edit fiddle - JSFiddle - Code Playground](https://jsfiddle.net/wveb74pa/)**
>
> Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Like I said before, it’s maybe better to model your geometry in a DCC tool and then import them into `three.js`.

---

<div class="post-metadata">

**Author:** ![CarlBateman](https://avatars.discourse-cdn.com/v4/letter/c/46a35a/32.png) [@CarlBateman](https://discourse.threejs.org/u/CarlBateman)\
**Post date:** [December 20, 2018, 3:36pm UTC](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412/20 "2018-12-20T15:36:16Z")

</div>

Derp. Sorry, I was talking nonsense. You’re right the rhombus is not flat.

However, this is not a bug but a feature of how PolyhedronBufferGeometry works, all points are **projected** onto the surface of a sphere of given radius (default 1). So, either for a rhombic dodecahedron all points are not equidistant from the centre or the points in the array vertices are incorrect.

I’m investigating further.

[Next page](https://discourse.threejs.org/t/problems-with-creating-custom-polyhedron-geometry/5412.md?page=2)