Chapter 769: Shape

Core Idea

Defines an arbitrary 2d shape plane using paths with optional holes. It can be used with ExtrudeGeometry, ShapeGeometry, to get points, or to get triangulated faces.

Key Concepts

• holes : Array.<Path> (readonly): Defines the holes in the shape. Hole definitions must use the opposite winding order (CW/CCW) than the outer shape.
• uuid : string (readonly): The UUID of the shape.

Code Examples

const heartShape = new THREE.Shape();
heartShape.moveTo( 25, 25 );
heartShape.bezierCurveTo( 25, 25, 20, 0, 0, 0 );
heartShape.bezierCurveTo( - 30, 0, - 30, 35, - 30, 35 );
heartShape.bezierCurveTo( - 30, 55, - 10, 77, 25, 95 );
heartShape.bezierCurveTo( 60, 77, 80, 55, 80, 35 );
heartShape.bezierCurveTo( 80, 35, 80, 0, 50, 0 );
heartShape.bezierCurveTo( 35, 0, 25, 25, 25, 25 );
const extrudeSettings = {
	depth: 8,
	bevelEnabled: true,
	bevelSegments: 2,
	steps: 2,
	bevelSize: 1,
	bevelThickness: 1
};
const geometry = new THREE.ExtrudeGeometry( heartShape, extrudeSettings );
const mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial() );

• What it demonstrates: Typical usage of Shape.

Reference Tables

Constructor

Signature
new Shape( points : Array.<Vector2> )

Properties

Property	Description
.holes : Array.<Path> (readonly)	Defines the holes in the shape. Hole definitions must use the opposite winding order (CW/CCW) than the outer shape.
.uuid : string (readonly)	The UUID of the shape.

Methods

Method	Description
.extractPoints( divisions : number ) : Object	Returns an object that holds contour data for the shape and its holes as arrays of 2D points.
.getPointsHoles( divisions : number ) : Array.<Array.<Vector2>>	Returns an array representing each contour of the holes as a list of 2D points.

Key Takeaways

1. Shape extends: Curve → CurvePath → Path
2. Most relevant properties: holes, uuid.
3. Key methods: extractPoints, getPointsHoles.

Connects To

• Curve: parent class
• CurvePath: parent class
• Path: parent class
• Source: src/extras/core/Shape.js