Any better implementation of ExtrudeGeometry?

Hi, been working with Three js for some weeks now and really enjoy it. I know many say that Three js is not a modelling tool, but personally I feel being able to create geometries on the fly is very interesting as it enables the opportunity to more quickly create objects over modelling in e.g. Blender.

Personally I have been tinkering with room creation and one challenge I met was using ExtrudeGeometry to create e.g. skirting or frames. The nice thing with it is that it supports shapes using bezier curves which means I can quickly generate profiles for extrusion. It all works fine until you want to achieve smooth shading, where using geometry.computeVertexNormals(true) then fails for the obvious reason that the front and back faces are also added for the vertices on the edges of the extruded shape. It sounds to me a simple solution would perhaps be to remove the faces on the ends (which might be what I will do in my case).

But perhaps there is an extended ExtrudeGeometry already that does not create the end faces? They are actually not needed for skirting and frames as they would always be inside a seam. Furthermore, some sort of geometry shearing would have to be done for each end.

Have a look at this thread

Possibly it will be helpful.

1 Like

Very nice! Just what I was seeking. I did a minor enhancement to it by adding “curveSegments” parameter as well for the ShapeBufferGeometry it creates. I feel the default of 12 is generally too high as that kind of detail is rarely needed for typical skirting and frames unless your camera gets really close. The fact that the normals are now correct based on the profile, means the shading is smooth even with lower number of segments in curves.

Thanks again for your tip!

You’re welcome! :wink: :beers:

Certainly, very diverse figures can only be created with modeling tools.

I also like the creation of custom geometries.

Maybe you need special geometries that can be generated with my three.js addons? hofk (Klaus Hoffmeister) · GitHub

See also

THREEf.js/modifyCreateGeo.html at dev · hofk/THREEf.js · GitHub

Addon. Produces almost infinite many time-varying geometries with functions - #31 by hofk
(Outputs the elementary BufferGeometry definition for a selected time.)

Modify indexed BufferGeometry (mouse or input)
(Modify the geometry)

Btw, I learned that if you create a shape that mix lineTo and bezierCurveTo, you have to be careful with how it calculated vertex normals as it seems to just average on connected lines, but I guess the information about when a line is used vs a curve is lost in the ShapeBufferGeometry. It is easy to assume that vertex normals for each line segment in the shape are averaged based on the curved lines, but for the straight lines one would want it to be perpendicular to the line. One way to avoid this is to use a very short line first before the full length of the straight line in order to simulate something like the Blender “loopcut”. This way it is smooth shaded on the curved areas and flat shaded on the flat parts of the shape. Althought his method ofc adds additional geometry as well.

Does your plugin support the latest three.js?

Since there is a new version of three.js every month, I cannot test it continuously. :frowning_face:

But the addon only uses very basic things of three.js. You can check it by searching the source code of THREEf in your browser for THREE.

Yes, it runs with r108. Try it out. Call the page
and replace r90 with r108 and reload.

I only replaced
examples THREEf ( r108.0 )
and the script
in the source.