Problems with creating custom polyhedron geometry

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

indeed… you right… Javascript is CPU…
i’m just wandering around… so much info coming at me… trying to get it straight… sry for asking silly retorical questions … oops…
:wink:

think i’m learning a lot from doing it all line by line…
puts attention to what i am doing…:wink:

the non index sure looks awesome… cant wait… hahaha…

herewidth the fiddle that shows the results of this thread, all new shapes have with prisoner849 solutions, first set the shapes to nonIndexed, then compute the normals, use flatschaded material.

and all is as it should be…
thank you guys… issue solved…

https://jsfiddle.net/Shakena/6a3emuq1/

1 Like

Hi i’m new so my question may seem stupid! Is it possible to place images inside the polyhedron shapes ?

Well, you can’t just place images into a 3D scene. A typical workflow is to create a PlaneGeometry and use it to create a mesh with a textured material that represents your image.

If you are new, take a look at the collection of examples

Two simple examples there (one with test pattern)
http://discourse.threejs.hofk.de/2017/Indexed%20BufferGeometry/Indexed%20BufferGeometry.html
http://discourse.threejs.hofk.de/2018/Spotlight/Spotlight.html

Somewhat more complicated, different textures are applied to surfaces.
http://discourse.threejs.hofk.de/2017/PictureBall/PictureBall.html
http://discourse.threejs.hofk.de/2018/BufferLabyrinthCreation3D/BufferLabyrinthCreation3D.html

Is it possible to insert different images on each face of the shape ?

Thank yoouu! so many cool stuff there )

Hi!
Yes, it is. Read about .groups and UV mapping.

to. groups read: https://threejs.org/docs/index.html#api/en/core/BufferGeometry


.groups : Array

Split the geometry into groups, each of which will be rendered in a separate WebGL draw call. This allows an array of materials to be used with the bufferGeometry.

Each group is an object of the form: { start: Integer, count: Integer, materialIndex: Integer } where start specifies the first element in this draw call – the first vertex for non-indexed geometry, otherwise the first triangle index. Count specifies how many vertices (or indices) are included, and materialIndex specifies the material array index to use.

Use .addGroup to add groups, rather than modifying this array directly.


There http://discourse.threejs.hofk.de/2017/Xindex2017.html is the
test example with a lot of materials http://sandbox.threejs.hofk.de/Geometry_BufferGeometry/speedtestSimple.html

1 Like