Threejs Advanced Seventeen: Path, Shape and ShapeGeometry classes in Threejs

In practical applications, sometimes we need to stretch a two-dimensional graphic into a three-dimensional graphic, which requires us to have an in-depth understanding of the classes related to two-dimensional graphics provided in Threejs. In this section, we will go deep Let's talk about the Path, Shape and ShapeGeometry classes in Threejs

Path class

Path is a multipurpose path (path) object, which is usually used when creating Shape objects. Multiple straight or curved paths, and their intersection points, can be defined. Path can be composed of multiple sub-paths, and each sub-path can contain multiple path segments. Path objects are constructed by Three.js' THREE.Path constructor.

Constructor

Path( points : Array ): Creates a Path from the passed in points. The first point defines the offset, and subsequent points are added to the curves array as LineCurves.
points – (optional) array of Vector2s.
If no point is specified, an empty path will be created and .currentPoint will be set to the origin.

common attributes

• .currentPoint: Indicates the property of the current path point object. By default it is (0,0).
• .autoClose: indicates whether the path is automatically closed. By default, it is false.

common method

• .moveTo( x, y ): Moves the starting point of the path to a new position (x,y), and creates a new point in the path. No return value. Sample code:

  path.moveTo( 10, 10 );
  

• .lineTo( x, y ): Creates a new point (x, y) in the path and draws a line between that point and the previous point. No return value. Sample code:

  path.lineTo( 50, 50 );
  

• .quadraticCurveTo( cx, cy, x, y ): Creates a control point (cx, cy) in the path and forms a quadratic Bezier curve with the current point and the end point. No return value. Sample code:

  path.quadraticCurveTo( 40, 10, 60, 50 );
  

• .bezierCurveTo( cx1, cy1, cx2, cy2, x, y ): Creates two control points (cx1, cy1) and (cx2, cy2) in the path and forms a cubic Bezier curve with the current point and the end point. No return value. Sample code:

  path.bezierCurveTo( 15, 15, 25, 45, 50, 50 );
  

• .ellipse( x, y, rx, ry, astart, aend, acw ): Create an elliptical path segment. No return value. Sample code:

  path.ellipse( 50, 50, 15, 8, 0, Math.PI * 2, false );
  

• arc(aX, aY, aRadius, aStartAngle, aEndAngle, aClockwise)- Creates an arc segment in the current subpath. Sample code:

  path.arc( 0, 0, 20, 0, Math.PI, true );
  

• ellipse(aX, aY, xRadius, yRadius, aStartAngle, aEndAngle, aClockwise, aRotation)- Creates an ellipse in the current subpath. Sample code:
  javascript path.ellipse( 0, 0, 20, 30, 0, Math.PI, true,0 );
• absarc(x, y, radius, startAngle, endAngle, clockwise)- Adds an arc with a center and radius to the shape.
• absellipse(x, y, xRadius, yRadius, startAngle, endAngle, clockwise)- Add an ellipse to the shape.

sample code

function initMesh() {
    
    
  // 创建一个新的路径对象
  const path = new THREE.Path(); 
  // 设置路径起点
  path.moveTo( 0, 0 ); 
  // 创建一条曲线段
  path.quadraticCurveTo( 10, 10, 20, 0 ); 
  // 创建一条弧线段
  path.arc( 0, 0, 10, 0, Math.PI, true ); 
  // 在路径末尾自动添加一条线段，形成闭合路径
  path.autoClose = true; 
  const points = path.getPoints();
  // 创建一个线性材质，并使用定义的路径创建一个网格对象
  const material = new THREE.LineBasicMaterial({
    
    
    color: 0xffffff
  });
  const geometry = new THREE.BufferGeometry().setFromPoints( points );
  const mesh = new THREE.Line(geometry, material); 
  // 添加网格对象到场景中
  scene.add(mesh);
}

Run the code, refresh the browser, and you can see that a two-dimensional graph has been drawn

Shape class

Shape is a class for creating flat shapes. It is based on Path, using paths and optional holes to define a two-dimensional shape plane, so it has all the functions of path objects. Shape can be used to create a simple two-dimensional shape, which is then converted into a renderable closed shape using ShapeGeometry. It can be used with ExtrudeGeometry, ShapeGeometry, to get points, or to get triangular faces.

Constructor

Shape( points : Array ): Create a Shape from points. The first point defines the offset, and subsequent points are added to the curves as LineCurves.
points – (optional) a Vector2 array.
If no point is specified, an empty shape will be created and .currentPoint will be set to the origin.

common attributes

• .uuid : String type, the UUID of the instance created by this class. It is assigned automatically, so it should not be edited or changed.
• .holes: An array representing zero or more holes inside the shape. That is, an array containing all internal holes (also Shape objects). The default is an empty array.
  Its common attributes are the same as path

common method

Shape has all the methods of Path.

• .moveTo( x, y )- Moves the starting point of the drawing point to a new position (x,y) and creates a new point in the path of the Shape path. No return value. Sample code:

  shape.moveTo( 10, 10 );
  

• .lineTo( x, y )- Adds a line to the Shape path, from the current point to the new point (x,y). No return value. Sample code:

  shape.lineTo( 50, 50 );
  

• .quadraticCurveTo( cx, cy, x, y )-Adds a quadratic Bezier curve to the Shape path that ends at the control point (cx, cy) and ends at (x, y). No return value. Sample code:

  shape.quadraticCurveTo( 40, 10, 60, 50 );
  

• .bezierCurveTo( cx1, cy1, cx2, cy2, x, y )-Adds a cubic Bezier curve to the Shape path that ends with two control points at (x, y). No return value. Sample code:

  shape.bezierCurveTo( 15, 15, 25, 45, 50, 50 );
  

• .arc( x, y, radius, startAngle, endAngle, counterclockwise )-Create an arc and add it to the current Shape path. counterclockwise controls whether the arc is clockwise or counterclockwise. No return value. Sample code:

  shape.arc( 50, 50, 15, 0, Math.PI * 2, false );
  

• absarc(x, y, radius, startAngle, endAngle, clockwise)- Adds an arc with a center and radius to the shape.
• absellipse(x, y, xRadius, yRadius, startAngle, endAngle, clockwise)- Add an ellipse to the shape.
• extractPoints(divisions : Integer)- divisions – the granularity (number of subdivisions) of the result. Call getPoints on the shape and the .holes array and return a value from:

  {
        
        
  	shape
  	holes
  }
  

  An object where the shapes and holes are Vector2 arrays.
• .getPointsHoles ( divisions : Integer ) : Array. Gets an array of Vector2s representing the holes in the shape.
  divisions – The granularity (number of subdivisions) of the result.
  Find a chart that introduces the above methods in detail in the Threejs Development Guide, as follows
  

sample code

function initShapeMesh() {
    
    
  // 创建一个形状
  const shape = new THREE.Shape();
  // 创建一个闭合路径
  shape.moveTo(0, 0);
  shape.lineTo(1, 0);
  shape.lineTo(1, 1);
  shape.lineTo(0, 1);
  shape.lineTo(0, 0); 
  // 创建线性材质
  const material = new THREE.MeshBasicMaterial({
    
    
    color: 0x00ff00
  });
  const geometry = new THREE.ShapeGeometry( shape );
  const mesh = new THREE.Mesh(geometry, material); 
  // 添加网格对象到场景中
  scene.add(mesh);
}

Run the code, refresh the browser, and you can see that a two-dimensional graph has been drawn

ShapeGeometry class

The ShapeGeometry class creates a single-sided polygonal geometry from one or more path shapes. It converts the enclosing Shape object to a Geometry object, which can then be used by the Mesh.

In fact, in the above example, we have used the ShapeGeometry class

Constructor

ShapeGeometry(shapes : Array, curveSegments : Integer)
shapes — A single shape, or an Array containing shapes. Defaults to a single triangle.
curveSegments - Integer - Number of segments for each shape, default is 12.

common attributes

For common attributes, please refer to its base class BufferGeometry.

• .parameters : Object- An object containing each parameter in the constructor. After the object is instantiated, any modification of this property will not change the geometry.

common method

For common methods, please refer to its base class BufferGeometry.

sample code

function initShapeGeometry() {
    
    
  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 );
 
  var geometry = new THREE.ShapeGeometry( shape );
  var material = new THREE.MeshBasicMaterial( {
    
     color: 0xff0000 } );
  var mesh = new THREE.Mesh( geometry, material );
  scene.add( mesh );
}

Run the code, refresh the browser, and see that the effect is

ok. This time, I will write it here first. If you like it, please pay attention, like and collect it! Friends who need the source code can search for Jiurenshan
on the WeChat official account, follow my official account, enter the keyword "shape", and get the download link