[page:Curve] → [page:CurvePath] →

# [name]

This class is used to convert a series of shapes to an array of [page:Path]s, for example an SVG shape to a path (see the example below). It is used internally by [page:Font] to convert a font in JSON format to a series of paths.

## Example

[example:webgl_geometry_extrude_shapes2 geometry / extrude / shapes2]

## Constructor

### [name]( )

Creates a new ShapePath. Unlike a [page:Path], no points are passed in as the ShapePath is designed to be generated after creation.

## Properties

### [property:array subPaths]

Array of [page:Path]s.

### [property:array currentPath]

The current [page:Path] that is being generated.

### [property:Color color]

[page:Color] of the shape, by default set to white (0xffffff).

## Methods

### [method:this moveTo]( [param:Float x], [param:Float y] )

Starts a new [page:Path] and calls [page:Path.moveTo]( x, y ) on that [page:Path]. Also points [page:ShapePath.currentPath currentPath] to that [page:Path].

### [method:this lineTo]( [param:Float x], [param:Float y] )

This creates a line from the [page:ShapePath.currentPath currentPath]'s offset to X and Y and updates the offset to X and Y.

### [method:this quadraticCurveTo]( [param:Float cpX], [param:Float cpY], [param:Float x], [param:Float y] )

This creates a quadratic curve from the [page:ShapePath.currentPath currentPath]'s offset to x and y with cpX and cpY as control point and updates the [page:ShapePath.currentPath currentPath]'s offset to x and y.

### [method:this bezierCurveTo]( [param:Float cp1X], [param:Float cp1Y], [param:Float cp2X], [param:Float cp2Y], [param:Float x], [param:Float y] )

This creates a bezier curve from the [page:ShapePath.currentPath currentPath]'s offset to x and y with cp1X, cp1Y and cp1X, cp1Y as control points and updates the [page:ShapePath.currentPath currentPath]'s offset to x and y.

### [method:this splineThru] ( [param:Array points] )

points - An array of [page:Vector2]s

Connects a new [page:SplineCurve] onto the [page:ShapePath.currentPath currentPath].

### [method:Array toShapes]( [param:Boolean isCCW], [param:Boolean noHoles] )

isCCW -- Changes how solids and holes are generated
noHoles -- Whether or not to generate holes

Converts the [page:ShapePath.subPaths subPaths] array into an array of Shapes. By default solid shapes are defined clockwise (CW) and holes are defined counterclockwise (CCW). If isCCW is set to true, then those are flipped. If the parameter noHoles is set to true then all paths are set as solid shapes and isCCW is ignored.

## Source

[link:https://github.com/mrdoob/three.js/blob/master/src/extras/core/ShapePath.js src/extras/core/ShapePath.js]