Problems with creating custom polyhedron geometry

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…

mathisfun very nice to see all these shapes… some of them i will code as well… they have hiden their code wel… would love to see how they did it…

great stuff from yourself as well… congratulations…
have some things in mind i like to produce as well… this issue with these not normal normal colors per facets is a bit disturbing cause it makes the final rendering/look of the shape a bit off… would like to fix it…

you are always welcome with helping hands… have lots to do… and only 2 hands and 24hrs a day…

the math is fun website solved it clearly…:wink:

I mean, you have to calculate the normals yourself for your own geometries (which are not based on tree.js geometries).

It’s just a little bit of work. :wink:

see e.g.

THREEg.js/THREEg.js at master · hofk/THREEg.js · GitHub

lines
1848 …
2072 …
2252 …

Something related:

could you help me to learn that… your code is waaaay out of my reach/understanding…
thank you…

yes… absolutely related… found this article… it also has similar issues as i have…

it also says… use Phong instead of Lambert

think i will use Phong… as work around cause calculating my own normals is very far fetched for me if i look at these codes from hofk for instance… waaaay out of reach for my current knowledge…:wink:
today i coded the shapes in a way it relates to the radius attribute so i can set the size of the shape on creation…

thank you…

always willing to learn ofcourse

Then it’s probably better to look at simple code for the first time.

I have added a very simple example to my collection on threejs.hofk.de.

http://threejs.hofk.de/BufferGeometry/buffer_withNormals.html

20181223-1214-42110

1 Like

One more option is to convert your custom indexed buffer geometries to non-indexed ones (use .toNonIndexed() method) and call .computeVertexNormals(). Should work even with THREE.MeshLambertMaterial() :slight_smile:

i dont understand what you say there… my shapes are custom indexed… what does that mean…???
where would i need to add the attribute/command
.toNonIndexed()
and then next… where do i put…
.computeVertexNormals()

this newby without real understanding three.js… just opened a buffered dodecahedron file
added some own vertices, added the faceconnects and assumed it would work…

since i only know Maya, and Maya does all these things for me, calculating normals and so on…
i am starting to see and understand, in three.js i need to code all these things Maya does auto, i need to code them in manually in Three.js… and there my knowledge is just lacking and want to learn to understand it… cause i have more things on my list i want to construct… so a deeper understanding on Three.js is needed… and also very lovely to learn… cause i learn geometry in new ways… and especially the math behind it… there is a fancy curve i created around scene center (0,0,0) in pure math… and that curve i like to code in 3dspace between two arbitrary points in pure math… no luck sofar cause my math knowledge is seriously lacking, working on it for 2 years now by trail and error cause i dont really understand the math explanations on wikipedia or youtube or any courses i bought… am asking around for people to help me… little like… please hold my hand till i can walk on my own…:wink: so i am now going to build it like HofK is showing… i saw in his code he does everything one by one… so i hope to learn a lot from doing it this spreadout wide way… then later learn to simplify it… cheers to you all for helping me out… i am really gratefull… thank you…

thank you… copied the code out from chrome inspection element and will use it as boilerplate to make a new Rhombic dodecahedron…

if that works, i will try to simply the code…
but for now… gonna code it exactly as you showed me to do…
cheers… this is awesome…

We have the documentation, thus all the things I’m talking about are there :slight_smile:
.toNonIndexed()
.computeVertexNormals()

See the visual difference for indexed and non-indexed buffer geometry, using THREE.MeshLambertMaterial():

the documentation is for me pretty hard to understand, how i need to read it… to me it looks like it is written in a way that people with some more experience than me use it…
but i need deeper understanding, so am going at it step by step…
cant run before i can walk…:wink:

thats a very crispy and sharp rhombic dodeca… hehe… thx…
working on the code HofK gave me… gives me a more clear understanding what it all enholds… coding geometry from scratch… i hope it works…

else its good to know there is a fallback system in place… :wink:

is my assumption correct…
when i code it myself in the way HofK is showing… the calculations are all done on the GPU, but when i use your solution the compute vertex normals is done on th CPU…???
i often wonder why the stats… frames per second go down so heavily when i only show one shape rotating…

You should look into the @hofk’s code more attentively :slight_smile: He computes all the normals at the javascript side too :slight_smile:

question… to calcultate the vertex nomals

some of the vertices (rhombic dodecahedron) have 4 adjacent planes, while other have 6,
should i make 2 different vertex normal functions…

one for the 4 adjacent planes and the other for the 6 adjacent planes…???
maybe for the 6 adjacent planes its ok to just calculate 3 of them…

what you think…???