---

title: Path category: Core layout: docs

Path

A 2D path representation. The class provides methods for creating paths and contours of 2D shapes similar to the 2D Canvas API.

Code Example

const path = new THREE.Path();
path.lineTo( 0, 0.8 );
path.quadraticCurveTo( 0, 1, 0.2, 1 );
path.lineTo( 1, 1 );
const points = path.getPoints();
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color: 0xffffff } );
const line = new THREE.Line( geometry, material );
scene.add( line );

Constructor

new Path( points : Array.<Vector2> )

Constructs a new path.

points | An array of 2D points defining the path.
---|---

Properties

.currentPoint : Vector2

The current offset of the path. Any new curve added will start here.

Methods

.absarc( aX : number, aY : number, aRadius : number, aStartAngle : number, aEndAngle : number, aClockwise : boolean ) : Path

Adds an absolutely positioned arc as an instance of EllipseCurve to the path.

aX | The x coordinate of the center of the arc. Default is 0.
---|---
aY | The y coordinate of the center of the arc. Default is 0.
aRadius | The radius of the arc. Default is 1.
aStartAngle | The start angle in radians. Default is 0.
aEndAngle | The end angle in radians. Default is Math.PI*2.
aClockwise | Whether to sweep the arc clockwise or not. Default is false.

Returns: A reference to this path.

.absellipse( aX : number, aY : number, xRadius : number, yRadius : number, aStartAngle : number, aEndAngle : number, aClockwise : boolean, aRotation : number ) : Path

Adds an absolutely positioned ellipse as an instance of EllipseCurve to the path.

aX | The x coordinate of the absolute center of the ellipse. Default is 0.
---|---
aY | The y coordinate of the absolute center of the ellipse. Default is 0.
xRadius | The radius of the ellipse in the x axis. Default is 1.
yRadius | The radius of the ellipse in the y axis. Default is 1.
aStartAngle | The start angle in radians. Default is 0.
aEndAngle | The end angle in radians. Default is Math.PI*2.
aClockwise | Whether to sweep the ellipse clockwise or not. Default is false.
aRotation | The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Default is 0.

Returns: A reference to this path.

.arc( aX : number, aY : number, aRadius : number, aStartAngle : number, aEndAngle : number, aClockwise : boolean ) : Path

Adds an arc as an instance of EllipseCurve to the path, positioned relative to the current point.

aX | The x coordinate of the center of the arc offsetted from the previous curve. Default is 0.
---|---
aY | The y coordinate of the center of the arc offsetted from the previous curve. Default is 0.
aRadius | The radius of the arc. Default is 1.
aStartAngle | The start angle in radians. Default is 0.
aEndAngle | The end angle in radians. Default is Math.PI*2.
aClockwise | Whether to sweep the arc clockwise or not. Default is false.

Returns: A reference to this path.

.bezierCurveTo( aCP1x : number, aCP1y : number, aCP2x : number, aCP2y : number, aX : number, aY : number ) : Path

Adds an instance of CubicBezierCurve to the path by connecting the current point with the given one.

aCP1x | The x coordinate of the first control point.
---|---
aCP1y | The y coordinate of the first control point.
aCP2x | The x coordinate of the second control point.
aCP2y | The y coordinate of the second control point.
aX | The x coordinate of the end point.
aY | The y coordinate of the end point.

Returns: A reference to this path.

.ellipse( aX : number, aY : number, xRadius : number, yRadius : number, aStartAngle : number, aEndAngle : number, aClockwise : boolean, aRotation : number ) : Path

Adds an ellipse as an instance of EllipseCurve to the path, positioned relative to the current point

aX | The x coordinate of the center of the ellipse offsetted from the previous curve. Default is 0.
---|---
aY | The y coordinate of the center of the ellipse offsetted from the previous curve. Default is 0.
xRadius | The radius of the ellipse in the x axis. Default is 1.
yRadius | The radius of the ellipse in the y axis. Default is 1.
aStartAngle | The start angle in radians. Default is 0.
aEndAngle | The end angle in radians. Default is Math.PI*2.
aClockwise | Whether to sweep the ellipse clockwise or not. Default is false.
aRotation | The rotation angle of the ellipse in radians, counterclockwise from the positive X axis. Default is 0.

Returns: A reference to this path.

.lineTo( x : number, y : number ) : Path

Adds an instance of LineCurve to the path by connecting the current point with the given one.

x | The x coordinate of the end point.
---|---
y | The y coordinate of the end point.

Returns: A reference to this path.

.moveTo( x : number, y : number ) : Path

Moves Path#currentPoint to the given point.

x | The x coordinate.
---|---
y | The y coordinate.

Returns: A reference to this path.

.quadraticCurveTo( aCPx : number, aCPy : number, aX : number, aY : number ) : Path

Adds an instance of QuadraticBezierCurve to the path by connecting the current point with the given one.

aCPx | The x coordinate of the control point.
---|---
aCPy | The y coordinate of the control point.
aX | The x coordinate of the end point.
aY | The y coordinate of the end point.

Returns: A reference to this path.

.setFromPoints( points : Array.<Vector2> ) : Path

Creates a path from the given list of points. The points are added to the path as instances of LineCurve.

points | An array of 2D points.
---|---

Returns: A reference to this path.

.splineThru( pts : Array.<Vector2> ) : Path

Adds an instance of SplineCurve to the path by connecting the current point with the given list of points.

pts | An array of points in 2D space.
---|---

Returns: A reference to this path.

Source

src/extras/core/Path.js