Extrusion with varying heights

Questions
,
1

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:

extrusion
extrusion975×512 19.4 KB

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.

2

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

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

3

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

extrusion2
extrusion21011×597 23.8 KB

4

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.

UPDATE:
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

https://hofk.de/main/discourse.threejs/2017/Indexed%20BufferGeometry/Indexed%20BufferGeometry.html

1 Like
5

I will check it out, thank you!

6

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() :

https://threejs.org/docs/index.html#api/en/extras/core/Shape
https://threejs.org/docs/index.html#api/en/extras/core/ShapePath