Extrusion with varying heights

Hello, I am trying to extrude a 2D rectangular shape “vertically”. but the geometry that I want has two different heights like the image below:

The following code produces ExtrudeGeometry with only one height

        var points = [p1, p2, p3, p4];
        var shape = new THREE.Shape(points);
        var geo = new THREE.ExtrudeGeometry([ shape ], {
            steps: 1,
            depth: 20,
            bevelEnabled: false,
            curveSegments: 1,

Is extrusion with varying heights possible in Three JS? documentation doesn’t mention anything similar to what I want.

Why don’t you extrude the side face? :thinking:

What is the reason? What do you want to achieve?

Because the 2D shape can change. as an example this image:

Then you can also extrude the modified side face.

However, if you want to make other changes, it is better to create a custom geometry. The side face is also a custom geometry.

In the Collection
Collection of examples from discourse.threejs.org
you will find (2017) a simple example of a self-defined BufferGeometry. In newer revisions of three.js you need to replace .addAttribute with .setAttribute


1 Like

I will check it out, thank you!

Maybe this is the easiest way to reach your goal. The side surface as shape.

From the collection 2019: https://hofk.de/main/discourse.threejs/2019/Shapes/Shapes.html

THREE.Shape() :