Hello, I’m working on modeling roofs in 3D with three.js.
I have the coordinates of each vertices of the roof, until now it worked fine by creating a face3, but when the roof has more than 4vertices the roof doesn’t always correspond to the reality. Which makes sense since there are multiple ways to make a face considering 4 vertices or more.
I recieve the vertices in a certain order, which means that consecutive vertices are connected in real life by a roof’s edge.
So i figured out, that I could draw the roof with edges, but I don’t know how I can color it.
Basically, I need a way to make a face with unlimited vertices or to connected edges and coloring the inside, like if I had faces.
I hope I’m clear enough, thanks for the help.
In the sourcecode of THREEf.js one can see, however, how the surfaces are designed in color.
function morphFaces( time ) {
...
if ( g.isGeometry ) {
...
// g is the geometry!
g.faces[ fIdx ].materialIndex = g.materialCover( ( j + 0.5 ) / rs, i / hs, t ); // by function
...
g.faces[ fIdx ].materialIndex = g.fixedMaterial[ fixMatIdx ][ j1 ]; // overwrite by array
What are you trying to archive? Procedurally generated roofs?
I have the coordinates of each vertices of the roof, until now it worked fine by creating a face3, but when the roof has more than 4vertices the roof doesn’t always correspond to the reality
Could you explain this a little more, maybe with screenshots?
In particular, once you have created the shape, look at this addShape function to see how it is converted to a mesh:
As always, start simple - i.e. test this out by creating a simple square, say with corners (0, 0, 0), (1, 0, 0), (1, 1, 0), (0, 1, 0), and then once you have that working move on to using your actual roof coords.
Hi everyone thanks for your reply.
I am procedurally generating roof from a list of vertices position that I am getting via a php connection to a postgresql database.
So basically, as Looeee is saying I am trying to build a geometry from a shape.
For example, the green section of the roof is composed by 5 vertices, that’s just the way I am getting the data. However, we can see that all the surface is not filled. And I do not want to simply create face out of all the vertices combanaisons possible, since in some case it would not worked all the time ( see example below ).
(The edge from 2 to 4 does not exist in reality).
Thanks again, If will look into what Looeee gave me, if you have any more idea, feel free to help.
Hi again, It seems that the solution provided by Looeee is flattening my roof, it seems logical since geometry shape only deals with 2D as well as I understand it.
What I am really trying to achieve is creating a custom 3D shape using the vertices or edges, using Face3 is not a good solution since it could generate unwanted section of the roof (see above ).
As a simple “fix” it may just be that you are creating polygons that are facing in the wrong direction - try applying a double sided material to the roof and see if that fixes things.
