Problems with creating custom polyhedron geometry

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

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

three.js only provides the platonic solids 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.).


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).

@CarlBateman 'm afraid your answer is not helpful. @shakena does not get the indices right for its Rhombic dodecahedron. Just have a look at the stackoverflow thread.


1 Like

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

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…

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

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…

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

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…:wink:
shakena out…

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…

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???

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

I’m not sure I understand. The shading of your first demo looks good. Keep in mind the demo uses MeshNormalMaterial.

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…

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

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

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…

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

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.


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…

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.

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

1 Like

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.