# Any better implementation of ExtrudeGeometry?

**URL:** <https://discourse.threejs.org/t/any-better-implementation-of-extrudegeometry/2657>\
**Category:** Questions\
**Tags:** geometry\
**Created:** [April 28, 2018, 9:18am UTC](https://discourse.threejs.org/t/any-better-implementation-of-extrudegeometry/2657 "2018-04-28T09:18:13Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![John\_Christian\_Lonningdal](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@John\_Christian\_Lonningdal](https://discourse.threejs.org/u/John_Christian_Lonningdal)\
**Post date:** [April 28, 2018, 9:18am UTC](https://discourse.threejs.org/t/any-better-implementation-of-extrudegeometry/2657/1 "2018-04-28T09:18:13Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 28, 2018, 9:33am UTC](https://discourse.threejs.org/t/any-better-implementation-of-extrudegeometry/2657/2 "2018-04-28T09:33:12Z")

</div>

Have a look at this thread

> [@ProfiledContourGeometry](https://discourse.threejs.org/t/profiledcontourgeometry/2330):
>
> Evolving of that [post](https://discourse.threejs.org/t/simple-rectangular-geometry-extrusion-anyone/743/14) [ProfiledContourGeometry3] The function has four parameters: THREE.Shape() for a profile; array of THREE.Vector2() for a contour; a boolean value for closing the contour (default is true); a boolean value for open ends (default is false). It calculates an angle between two edges of contour and then consiquently applies three matrices of shear/shift, rotation and translation to the points of the profile at each point of contour. The solution is still rough and raw, an…

Possibly it will be helpful.

---

<div class="post-metadata">

**Author:** ![John\_Christian\_Lonningdal](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@John\_Christian\_Lonningdal](https://discourse.threejs.org/u/John_Christian_Lonningdal)\
**Post date:** [April 28, 2018, 10:47am UTC](https://discourse.threejs.org/t/any-better-implementation-of-extrudegeometry/2657/3 "2018-04-28T10:47:00Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [April 28, 2018, 12:00pm UTC](https://discourse.threejs.org/t/any-better-implementation-of-extrudegeometry/2657/4 "2018-04-28T12:00:55Z")

</div>

You’re welcome! 😉 🍻

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [April 28, 2018, 6:48pm UTC](https://discourse.threejs.org/t/any-better-implementation-of-extrudegeometry/2657/5 "2018-04-28T18:48:20Z")

</div>

> [@John\_Christian\_Lonningdal](#):
>
> 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.

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](https://github.com/hofk)

> [@Addon. Produces almost infinite many time-varying geometries with functions](https://discourse.threejs.org/t/addon-produces-almost-infinite-many-time-varying-geometries-with-functions/262/):
>
> For the first time, I came across three.js in January 2016. Since September I have been working on this issue. In three.js core elementary geometries are defined. When designing my “Bumblebee Mara” I needed other shapes and produced them by deformation of sphere and cylinder. [http://codepen.io/hofk/pen/eWdZMb](http://codepen.io/hofk/pen/eWdZMb) Additionally inspired by [https://threejs.org/examples/js/ParametricGeometries.js](https://threejs.org/examples/js/ParametricGeometries.js) ( @author zz85 \<\<\< old link, no longer available, see revision 100) I have programmed a three.js addo…

See also

[THREEf.js/THREEf\_90/modifyCreateGeo.html at dev · hofk/THREEf.js · GitHub](https://github.com/hofk/THREEf.js/blob/dev/THREEf_90/modifyCreateGeo.html)

[Addon. Produces almost infinite many time-varying geometries with functions - #31 by hofk](https://discourse.threejs.org/t/addon-produces-almost-infinite-many-time-varying-geometries-with-functions/262/31)  
(Outputs the elementary BufferGeometry definition for a selected time.)

[Modify indexed BufferGeometry (mouse or input)](https://discourse.threejs.org/t/modify-indexed-buffergeometry-mouse-or-input/1674)  
(Modify the geometry)

---

<div class="post-metadata">

**Author:** ![John\_Christian\_Lonningdal](https://avatars.discourse-cdn.com/v4/letter/j/c89c15/32.png) [@John\_Christian\_Lonningdal](https://discourse.threejs.org/u/John_Christian_Lonningdal)\
**Post date:** [April 30, 2018, 6:45am UTC](https://discourse.threejs.org/t/any-better-implementation-of-extrudegeometry/2657/6 "2018-04-30T06:45:34Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![wenrenqiang](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wenrenqiang/32/54020_2.png) [@wenrenqiang](https://discourse.threejs.org/u/wenrenqiang)\
**Post date:** [September 20, 2019, 2:13am UTC](https://discourse.threejs.org/t/any-better-implementation-of-extrudegeometry/2657/7 "2019-09-20T02:13:08Z")

</div>

Does your plugin support the latest three.js?

---

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [September 20, 2019, 6:57am UTC](https://discourse.threejs.org/t/any-better-implementation-of-extrudegeometry/2657/8 "2019-09-20T06:57:58Z")

</div>

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

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  
[https://hofk.de/main/threejs/sandboxthreef/examplesTHREEf%20r90.html](https://hofk.de/main/threejs/sandboxthreef/examplesTHREEf%20r90.html)  
and replace **r90** with **r108** and reload.

I only replaced  
**examples THREEf ( r108.0 )**  
and the script  
**src=“three.min.108.js”**.  
in the source.