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

Crossposting:

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.

Demo: https://jsfiddle.net/f2Lommf5/16750/

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

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/

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ā€¦

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

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ā€¦
https://jsfiddle.net/Shakena/pf8yt9nL/11/

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.

HTH

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

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.

2 Likes