Problems with creating custom polyhedron geometry

… if you make the value s into a 1 the plane becomes a different shape… it is supposed to be a parallelogram but when i change the value s into 1…as you say… it becomes a square… and ya cannot build rhombic triacontahedrons from squares… you build it from parallelograms…

please have a look what shape i am trying to construct…

i assure you…the input data is correct, the calculations are correct… in any 3d software i can build this shape properly… with these same values/calculations… scale them and manipulate them…

??? just a logical question…
… if all 4 vertices have the same value in Y, and i make a surface between those 4 vertices… the surface should be flat… dont you agree…???.. yet in three.js it does not do that…

it does the same with a rhombic dodecahedron… all my inputs are correct…

incorporating these shapes in my web project… “dynamically”… but that flyer aint flying… when three.js does these crazy things… it looks ugly and not how it should be…

if i was a developer from Three.js i would see this as a serious bug or problem… cause it would mean ya cannot use three.js for exact geometric models/math… that is proven by this post…

finding workarounds for these kinda issues in a 3d engine… is meaning to me the 3d engine is not coded properly… so maybe you dont want to call it a bug… but its beyond reason of doubt to me… three.js cant handle straight forward geometry… so i think thats a serious issue for a 3d engine… but we can disagree on opinion… i’m fine with that…

i wil try to import them and see if the same thing happens… i think it will… cause the imported file will also have the same values for the vertices… but we will see… thank you…

thank you carl… if you need anything from me… please let me know… i know from experience the calculations… vertex points are solid… i coded them in Maya as own custom plugins…
and they work just fine… i can show you the code… from my plugins… same code…

i think this is something the three.js team should look into and fix, the way three.js is handling straight forward geometry is not how it should handle/compute it… any other 3d package does it the right way…

this same issue happens with the rhombic dodecahedron…

it has 2 vallues… 1 and 2… with one you make the vertices of a cube, and then in 6 directions you use the value 2… that makes the vertices of the rhombicdodecahedron… i tried using only values with max 1… meaning… for the cube vertices i changed the 1 into a 0.5 and the 2 into a one… yet the issue at hand stays the same…

ok, imported them as .gtlf file
no issue with broken surfaces… the shapes look fine…
but how do i now acces my vertices so i can dynamically manipulate the shape… cause thats what i intent to do…???

Hi!
This is the part, where all your vertices get the same radius (a funny name of appplyRadius() wiht three p:slight_smile:) :

Yes, it works this way for platonic solids.

I see two options:

  1. You can continue to compain in demanding tone about Three.js and its developers, who wrote PolyhedronGeometry for the type of solids that your object doesn’t belong to.
  2. You can write something your own to solve the task and be happy :beers:
2 Likes

sorry if my tone is coming in as demanding… its not meant like that… i’m just a newby when it comes to three.js and am a bit disapointed… thats all no bad vibes intented… sorry is in order it seems…

does this mean i have to code my vertices of the shapes so it has values to correlate with a shape that has a radius of one… cause the shapes i am trying to build have multiple radius… for instance for the rhombic dodecahedron it has at one vertex a radius of a cube… while on a othe vertex a different radius…

with the rhombictriacontahedron it has even 3 different radius… can you advise me please on how to do this…
thank you…

Okay :slight_smile: Maybe I’m too old and see things differently :beers: :peace_symbol:

You can take PolyhedralGeometry as a base and change it for your needs. If there’s no out-of-the-box features in the framework, then feel free to modify something existing or write your own from the scratch :slight_smile:

cheers… to peace…:whale:

if i only knew how… dont even have a clue where to start…
thats why i sayd the three.js should people look into this… i think it would add more strength to their library…
"i’m dutch we say are often being called blunt…and all sorts of things…;-). "
if i knew how i would add it… but me does not have the knowledge to even understand what i would have to do to fix that…

will have to postpone my 3d project mostlikely…
finally i understood a bit here and there to get some nice 3d things done in three.js and then this happens…
still have some math puzzles to fix in Maya as well… so that will come first…

thank you for pointing it out to me why… it does not work… and thx for showing me i should watch my language better next time so people dont get the wrong ideas…

cheers man…

further below…prisoner849… points out where it goes wrong, if i understand correctly its the same thing as you describe… , as far as i understand, my shape have multiple radiusses, with dfferent lengths, and the buffered geometry needs same distances from each vertex back to the core…as you say my shapes have vertices that do not have same distance to center, and that seems to be the reason why my shapes are displayed in this manner, since i have not the knowledge to fix this in the file, PolyhedronGeometry.js i will have to leave at this point, and hopefully someone will pick it up… and fix it… seems there is some years between now and the time i can do what i like doing in a web 3d environment… thank you… i dont want to be demanding nor blunt… peace…

Check out https://sable-coriander.glitch.me/.

It uses THREE.Geometry rather than THREE.BufferGeometry, but it can be changed later, and I was in a rush to get something online.

There may be a case for adding a boolean parameter to PolyhedronBufferGeometry to enable/disable appplyRadius **

** Oh look, a typo! :slight_smile:

Considering to your last fiddle, you’ve done almost all the job with vertices and indices, you just need normals.
I’m not so experienced with creating of geometries, so better specialists can check my approach and correct it or say that it’s totally wrong :slight_smile: :
https://jsfiddle.net/prisoner849/pkgd98b1/

you are more genious than me, when it comes to understanding coding 3d geometries…geometries thats for sure… awesome… looks fine to me… next challenge… animate these geometric friends… yeah…

straight planes… shading looks to behave pretty normal… thx… and very plenty thanks… happy chap once more at this end… . love it… cheers…

on a better look…
this is my testing ground…
https://jsfiddle.net/Shakena/qh8Ljsra/

when i implement your few lines of genious code… it seems to work but the shapes come on display very small… when i do scale them up… the edges seem a bit like softedge… in maya i can make hard edges and softedges… these edges seem a bit soft edge… or my lighting is of or i maybe should use a different shading…

i will setup a three point lighting set tomorrow that should make the object lighting better and try some different shaders see if those make the edges a bit more clear…

thank you … one step closer for sure…
carlbateman has also something going but cant see the code so i wait as well for his solution… i can see straight planes in his quick sketch as well… exciting times…:wink:

very curious to your coding carl… looks good… beautifull straight planes you got there…
i will be patient… keep me posted on your progress…

this is my testing ground…
https://jsfiddle.net/Shakena/qh8Ljsra/11/

selecting shapes and see if lighting is ok…
prisoner849 also had a solution… adding normals… but then the shapes become very tiny and still have to check if the lighting works well when the shapes being scaled…

thank you for investigating with me… its very much apreciated…:wink:

Hey! You managed to use THREE.BufferGeometry, so that’s one up on me. Finally some example code I can use!

And this is programming. The highs, the lows, the achievement, the failures. Proceeding inch by painful inch, then the epiphany, then the drudgery, then the fun, and then, finally, success.

The biggest part is not giving up. You’ve got an idea, you’re learning, it’s all good!

1 Like

In the fiddle, you’ve provided, that magic does the trick:

var myMaterial = new THREE.MeshPhongMaterial({color: 0x4080ff, dithering: true, flatShading: true}); // set flatShading to 'true'

@shakena has done most of the job, I’ve just made slight changes :slight_smile:

1 Like

thank you guys… adding stuff to the test scene… seems the rhombic dodeca still has some broken ness on the planes… triacontahedron looks sharp and crispy… will play around with some different lighting setups to see if its there cause of lighting… will share the progess when its ready…

Maybe you can find inspiration there:
https://www.mathsisfun.com/geometry/polyhedron-models.html?m=Rhombicuboctahedron

There see e.g.
view-source:https://www.mathsisfun.com/geometry/images/poly-models.js
Interesting at line 644 and following.

Maybe you make a tree.js addon like I did.
Addon. Produces almost infinite many time-varying geometries with functions
hofk (Klaus Hoffmeister) · GitHub

enjoy it :wink:

1 Like

Hi Peeps…

back with an update… heres the fiddle… with also the Triacontahedron fulled surfaced…
https://jsfiddle.net/Shakena/6a3emuq1/5/

the solution prisoner849 made… is as it looks a half solution… very curious how CarlBatemens solution is working out when he now also can see this and has a fully surfaced triacontahedron to his fingertips…:wink:

the shapes look pretty good with the normal lambert… yet the edges do not come very clear out…
even when i use the flatShading attribute… the flatShading helps for sure… thx for that tip…

but when we load the shapes with a MeshNormalMaterial… you can see why the edges dont become clear…
all the library shapes with a single shape radius turn out fine… also the cuboctahedron that i created… yet the rhombic dodecahedron and the triacontahedron have no proper normal mapping, all other shapes have per plane a single normal color…, but those last 2 shapes not… each facet/plane have gradients of the normalmaterial…

does anyone have ideas how we can code proper normal mappings… or UV maps for these shapes so Three.js is able to handle these shapes as it should…???

all inputs are very welcome…