Threejs Advanced Eighteen: Using ExtrudeGeometry to Create 3D Geometry from 2D Graphics

In the previous section, we introduced the classes related to two-dimensional graphics in Threejs. In this section, we will talk about how to generate three-dimensional graphics through the created two-dimensional graphics.

ExtrudeGeometry class

The ExtrudeGeometry class (extrusion buffer geometry) is a class in Three.js, which is used to stretch the two-dimensional contour line into a three-dimensional shape along the specified path. Its constructor looks like this:

Constructor

ExtrudeGeometry(shape, options)

This object extrudes a 2D shape into a 3D geometry
ExtrudeGeometry parameter

• shape : The shape object required by ExtrudeGeometry or an array containing shapes.
• options : The options object of ExtrudeGeometry. Specifically, it contains the following parameters:

The parameters contained in options

• curveSegments — int, the number of points on the curve, the default value is 12.
• steps — int, the number of points to subdivide along the depth of the extrusion spline, default is 1.
• depth — float, the depth of the extruded shape, the default value is 1.
• bevelEnabled — bool, whether to add a bevel to the sides, the default value is true.
• bevelThickness — float, sets the thickness of the bevel on the original shape. The default value is 0.2.
• bevelSize — float. The extension distance between the bevel and the outline of the original shape, that is, the length of each bevel, the default value is bevelThickness-0.1.
• bevelOffset — float. The offset of the object's outline. The default value is 0.
• bevelSegments—int. The number of segmented layers of the bevel, the default value is 3.
• extrudePath — THREE.Curve object. A 3D spline along the extruded shape. Beveled faces are not supported for path extrusion.
• UVGenerator — Object. An object that provides UV generator functions.

Basic steps to create 3D graphics from 2D graphics using ExtrudeGeometry

1. Create 2D graphics

To create a 3D graph from a 2D graph, you first need to create a 2D graph. We can create two-dimensional graphics using two Three.js objects: THREE.Shapeand THREE.Path. The specific characteristics and methods of these two classes have been introduced in the previous section Threejs Advanced Seventeen: Path, Shape and ShapeGeometry classes in Threejs . If you don’t understand, please refer to the blog content in the previous section. . Here is just a brief introduction

Shape
Shape is a two-dimensional outline consisting of a series of points, lines and arcs. A shape with a complex outline can be constructed by combining these basic primitives.
We can create an object containing a rectangle and an arc with the following code Shape:

var shape1 = new THREE.Shape();
//向shape对象中添加矩形和圆弧
shape1.moveTo(0, 0);//起始点
shape1.lineTo(0, 10);//下直线
shape1.lineTo(20, 10);//右直线
shape1.lineTo(20, 0);//上直线
shape1.lineTo(0, 0);//左直线
var holePath = new THREE.Path();
holePath.absellipse(10, 5, 5, 5, 0, Math.PI * 2, true);
shape1.holes.push(holePath);

In the above code, we first moveTo()define the starting point of the rectangle through the method, and then use lineTo()the method to define the four boundaries of the rectangle. Next, we use absellipse()the method to create the arc and add it as an inner cavity to Shape.

Path
When creating Shapean object, we can also use Paththe object to define the basic outline of the shape, which consists of a series of points and lines.
We can create an object with a trapezoid and rounded corners with the following code Path:

var path = new THREE.Path();
path.moveTo(0, 0);
path.lineTo(20, 10);
path.lineTo(20, 20);
path.lineTo(0, 10);
path.lineTo(0, 0);

var circlePath = new THREE.Path();
circlePath.absarc(10, 10, 5, 0, Math.PI * 2);
path.holes.push(circlePath);

In the above code, we moveTo()specify the position of the lower left corner of the trapezoid through the method, and then use lineTo()the method to define the positions of the four vertices of the trapezoid. Next, we use absarc()the method to create a fillet and add it to Paththe object's default hole.

Here we use shape to create two-dimensional graphics, the code is as follows: We create a heart shape through shape

  var shape = new THREE.Shape();
  shape.moveTo( 0, 20 );
  shape.bezierCurveTo( 0, 10, -18, 0, -25, 0 );
  shape.bezierCurveTo( -55, 0, -55, 35, -55, 35 );
  shape.bezierCurveTo( -55, 55, -35, 77, 0, 95 );
  shape.bezierCurveTo( 35, 77, 55, 55, 55, 35 );
  shape.bezierCurveTo( 55, 35, 55, 0, 25, 0 );
  shape.bezierCurveTo( 18, 0, 0, 10, 0, 20 );

2. Create the outline (outline)

With a two-dimensional shape Shapeor Pathobject, we can create the corresponding outline (outline) through the parameters THREE.ExtrudeGeometryin the constructor .shapes

var extrudeSettings = {
    
    
    depth: 10,
    bevelEnabled: false,
    steps: 1
};
var geometry = new THREE.ExtrudeGeometry(shape, extrudeSettings);

In the above code, the ExtrudeGeometry object is created using the ExtrudeGeometry constructor and the extrudeSettings parameter.

3. Create Material and Mesh Objects

Create the material and mesh object Mesh, and pass the above geometry and material as parameters

var material = new THREE.MeshPhongMaterial( {
    
     color: 0xffffff, specular: 0x111111, shininess: 200 } )
var mesh = new THREE.Mesh( geometry, material )
scene.add( mesh );

Refresh the browser, you can see that a three-dimensional heart-shaped figure with a depth of 10 has been stretched in the browser based on the two-dimensional heart-shaped figure we created

Supplementary content: Generate stretched graphics as wireframe mode

We can generate 3D graphics as wireframe mode, the steps are as follows:

1. Create a WireframeGeometry object and pass the ExtrudeGeometry object to it:

var wireGeometry = new THREE.WireframeGeometry( extrudeGeometry );

2. Pass the WireframeGeometry object to the LineSegments object to display the wireframe geometry:

var wireMaterial = new THREE.LineBasicMaterial( {
    
     color: 0xffffff } );
var wireframe = new THREE.LineSegments( wireGeometry, wireMaterial );
scene.add( wireframe );

Well, let's get here first today, friends who like it, like it, follow it and collect it!