Path | ngx3js

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 );

Hierarchy

I3JS.CurvePath<I3JS.Vector2>
- Path
  - I3JS.Shape

Constructors

constructor

new Path(points?: I3JS.Vector2[]): I3JS.Path
new Path(): I3JS.Path
new Path(): I3JS.Path

Inherited from CurvePath.constructor
- Defined in lib/threejs-library/types/three/extras.ts:299
Creates a Path from the points. The first point defines the offset, then successive points are added to the curves array as LineCurves. If no points are specified, an empty path is created and the .currentPoint is set to the origin.

Parameters
- Optional points: I3JS.Vector2[]
Returns I3JS.Path
Inherited from CurvePath.constructor
- Defined in lib/threejs-library/types/three/extras.ts:235
The constructor take no parameters.

Returns I3JS.Path
Inherited from CurvePath<Vector2>.constructor
- Defined in lib/threejs-library/types/three/extras.ts:120
This constructor creates a new Curve.

Returns I3JS.Path

Properties

arcLengthDivisions

arcLengthDivisions: number

This value determines the amount of divisions when calculating the cumulative segment lengths of a curve via .getLengths. To ensure precision when using methods like .getSpacedPoints, it is recommended to increase .arcLengthDivisions if the curve is very large. Default is 200.

default: 200

autoClose

autoClose: boolean

Whether or not to automatically close the path.

default: false

currentPoint

currentPoint: I3JS.Vector2

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

default: new THREE.Vector2()

curves

curves: I3JS.Curve<I3JS.Vector2>[]

The array of Curves.

default: []

type

type: string

default: 'Path'

Methods

absarc

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

- Defined in lib/threejs-library/types/three/extras.ts:364
Adds an absolutely positioned EllipseCurve to the path.

Parameters
- aX: number
  
  The absolute center of the arc.
- aY: number
  
  The absolute center of the arc.
- aRadius: number
- aStartAngle: number
  
  The start angle in radians.
- aEndAngle: number
  
  The end angle in radians.
- aClockwise: boolean
  
  Sweep the arc clockwise. Defaults to false.
Returns I3JS.Path

absellipse

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

- Defined in lib/threejs-library/types/three/extras.ts:397
Parameters
- aX: number
- aY: number
- xRadius: number
- yRadius: number
- aStartAngle: number
- aEndAngle: number
- aClockwise: boolean
- aRotation: number
Returns I3JS.Path

add

add(curve: I3JS.Curve<I3JS.Vector2>): void

Inherited from CurvePath.add
- Defined in lib/threejs-library/types/three/extras.ts:257
Add a curve to the .curves array.

Parameters
- curve: I3JS.Curve<I3JS.Vector2>
Returns void

arc

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

- Defined in lib/threejs-library/types/three/extras.ts:352
Parameters
- aX: number
- aY: number
- aRadius: number
- aStartAngle: number
- aEndAngle: number
- aClockwise: boolean
Returns I3JS.Path

bezierCurveTo

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

- Defined in lib/threejs-library/types/three/extras.ts:336
This creates a bezier curve from .currentPoint with (cp1X, cp1Y) and (cp2X, cp2Y) as control points and updates .currentPoint to x and y.

Parameters
- aCP1x: number
- aCP1y: number
- aCP2x: number
- aCP2y: number
- aX: number
- aY: number
Returns I3JS.Path

clone

clone(): I3JS.Path

Inherited from CurvePath.clone
- Defined in lib/threejs-library/types/three/extras.ts:210
Creates a clone of this instance.

Returns I3JS.Path

closePath

closePath(): void

Inherited from CurvePath.closePath
- Defined in lib/threejs-library/types/three/extras.ts:262
Adds a lineCurve to close the path.

Returns void

computeFrenetFrames

computeFrenetFrames(segments: number, closed?: boolean): { binormals: I3JS.Vector3[]; normals: I3JS.Vector3[]; tangents: I3JS.Vector3[] }

Inherited from CurvePath.computeFrenetFrames
- Defined in lib/threejs-library/types/three/extras.ts:198
Generates the Frenet Frames. Requires a curve definition in 3D space. Used in geometries like TubeGeometry or ExtrudeGeometry.

Parameters
- segments: number
- Optional closed: boolean
Returns { binormals: I3JS.Vector3[]; normals: I3JS.Vector3[]; tangents: I3JS.Vector3[] }
- binormals: I3JS.Vector3[]
- normals: I3JS.Vector3[]
- tangents: I3JS.Vector3[]

copy

copy(source: I3JS.Curve<I3JS.Vector2>): I3JS.Path

Inherited from CurvePath.copy
- Defined in lib/threejs-library/types/three/extras.ts:215
Copies another Curve object to this instance.

Parameters
- source: I3JS.Curve<I3JS.Vector2>
Returns I3JS.Path

ellipse

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

- Defined in lib/threejs-library/types/three/extras.ts:376
Parameters
- aX: number
- aY: number
- xRadius: number
- yRadius: number
- aStartAngle: number
- aEndAngle: number
- aClockwise: boolean
- aRotation: number
Returns I3JS.Path

fromJSON

fromJSON(json: object): I3JS.Path

Inherited from CurvePath.fromJSON
- Defined in lib/threejs-library/types/three/extras.ts:225
Copies the data from the given JSON object to this instance.

Parameters
- json: object
Returns I3JS.Path

getCurveLengths

getCurveLengths(): number[]

Inherited from CurvePath.getCurveLengths
- Defined in lib/threejs-library/types/three/extras.ts:273
Get list of cumulative curve lengths of the curves in the .curves array.

Returns number[]

getLength

getLength(): number

Inherited from CurvePath.getLength
- Defined in lib/threejs-library/types/three/extras.ts:163
Get total curve arc length.

Returns number

getLengths

getLengths(divisions?: number): number[]

Inherited from CurvePath.getLengths
- Defined in lib/threejs-library/types/three/extras.ts:168
Get list of cumulative segment lengths.

Parameters
- Optional divisions: number
Returns number[]

getPoint

getPoint(t: number, optionalTarget?: I3JS.Vector2): I3JS.Vector2

Inherited from CurvePath.getPoint
- Defined in lib/threejs-library/types/three/extras.ts:268
Parameters
- t: number
- Optional optionalTarget: I3JS.Vector2
Returns I3JS.Vector2
Returns an array of points representing a sequence of curves. The division parameter defines the number of pieces each curve is divided into. However, for optimization and quality purposes, the actual sampling resolution for each curve depends on its type. For example, for a LineCurve, the returned number of points is always just 2.

getPointAt

getPointAt(u: number, optionalTarget?: I3JS.Vector2): I3JS.Vector2

Inherited from CurvePath.getPointAt
- Defined in lib/threejs-library/types/three/extras.ts:146
Parameters
- u: number
  
  A position on the curve according to the arc length. Must be in the range [ 0, 1 ].
- Optional optionalTarget: I3JS.Vector2
  
  If specified, the result will be copied into this Vector, otherwise a new Vector will be created.
Returns I3JS.Vector2
Returns a vector for a given position on the curve according to the arc length.

getPoints

getPoints(divisions?: number): I3JS.Vector2[]

Inherited from CurvePath.getPoints
- Defined in lib/threejs-library/types/three/extras.ts:152
Parameters
- Optional divisions: number
Returns I3JS.Vector2[]
Returns a set of divisions + 1 points using getPoint( t ).

getSpacedPoints

getSpacedPoints(divisions?: number): I3JS.Vector2[]

Inherited from CurvePath.getSpacedPoints
- Defined in lib/threejs-library/types/three/extras.ts:158
Parameters
- Optional divisions: number
Returns I3JS.Vector2[]
Returns a set of divisions + 1 equi-spaced points using getPointAt( u ).

getTangent

getTangent(t: number, optionalTarget?: I3JS.Vector2): I3JS.Vector2

Inherited from CurvePath.getTangent
- Defined in lib/threejs-library/types/three/extras.ts:186
Parameters
- t: number
  
  A position on the curve. Must be in the range [ 0, 1 ].
- Optional optionalTarget: I3JS.Vector2
  
  If specified, the result will be copied into this Vector, otherwise a new Vector will be created.
Returns I3JS.Vector2
Returns a unit vector tangent at t. If the derived curve does not implement its tangent derivation, two points a small delta apart will be used to find its gradient which seems to give a reasonable approximation.

getTangentAt

getTangentAt(u: number, optionalTarget?: I3JS.Vector2): I3JS.Vector2

Inherited from CurvePath.getTangentAt
- Defined in lib/threejs-library/types/three/extras.ts:193
Parameters
- u: number
  
  A position on the curve according to the arc length. Must be in the range [ 0, 1 ].
- Optional optionalTarget: I3JS.Vector2
  
  If specified, the result will be copied into this Vector, otherwise a new Vector will be created.
Returns I3JS.Vector2
Returns tangent at a point which is equidistant to the ends of the curve from the point given in .getTangent.

getUtoTmapping

getUtoTmapping(u: number, distance: number): number

Inherited from CurvePath.getUtoTmapping
- Defined in lib/threejs-library/types/three/extras.ts:179
Given u in the range ( 0 .. 1 ), returns t also in the range ( 0 .. 1 ). u and t can then be used to give you points which are equidistant from the ends of the curve, using .getPoint.

Parameters
- u: number
- distance: number
Returns number

lineTo

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

- Defined in lib/threejs-library/types/three/extras.ts:326
Connects a LineCurve from .currentPoint to x, y onto the path.

Parameters
- x: number
- y: number
Returns I3JS.Path

moveTo

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

- Defined in lib/threejs-library/types/three/extras.ts:321
Move the .currentPoint to x, y.

Parameters
- x: number
- y: number
Returns I3JS.Path

quadraticCurveTo

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

- Defined in lib/threejs-library/types/three/extras.ts:331
Creates a quadratic curve from .currentPoint with cpX and cpY as control point and updates .currentPoint to x and y.

Parameters
- aCPx: number
- aCPy: number
- aX: number
- aY: number
Returns I3JS.Path

setFromPoints

setFromPoints(vectors: I3JS.Vector2[]): I3JS.Path

- Defined in lib/threejs-library/types/three/extras.ts:316
Points are added to the curves array as LineCurves.

Parameters
- vectors: I3JS.Vector2[]
Returns I3JS.Path

splineThru

splineThru(pts: I3JS.Vector2[]): I3JS.Path

- Defined in lib/threejs-library/types/three/extras.ts:342
Connects a new SplineCurve onto the path.

Parameters
- pts: I3JS.Vector2[]
Returns I3JS.Path

toJSON

toJSON(): object

Inherited from CurvePath.toJSON
- Defined in lib/threejs-library/types/three/extras.ts:220
Returns object
Returns a JSON object representation of this instance.

updateArcLengths

updateArcLengths(): void

Inherited from CurvePath.updateArcLengths
- Defined in lib/threejs-library/types/three/extras.ts:174
Update the cumlative segment distance cache. The method must be called every time curve parameters are changed. If an updated curve is part of a composed curve like CurvePath, .updateArcLengths() must be called on the composed curve, too.

Returns void

Code Example

Hierarchy

Index

Constructors

Properties

Methods

Constructors

constructor

Parameters

Optional points: I3JS.Vector2[]

Returns I3JS.Path

Returns I3JS.Path

Returns I3JS.Path

Properties

arcLengthDivisions

autoClose

currentPoint

curves

type

Methods

absarc

Parameters

aX: number

aY: number

aRadius: number

aStartAngle: number

aEndAngle: number

aClockwise: boolean

Returns I3JS.Path

absellipse

Parameters

aX: number

aY: number

xRadius: number

yRadius: number

aStartAngle: number

aEndAngle: number

aClockwise: boolean

aRotation: number

Returns I3JS.Path

add

Parameters

curve: I3JS.Curve<I3JS.Vector2>

Returns void

arc

Parameters

aX: number

aY: number

aRadius: number

aStartAngle: number

aEndAngle: number

aClockwise: boolean

Returns I3JS.Path

bezierCurveTo

Parameters

aCP1x: number

aCP1y: number

aCP2x: number

aCP2y: number

aX: number

aY: number

Returns I3JS.Path

clone

Returns I3JS.Path

closePath

Returns void

computeFrenetFrames

Parameters

segments: number

Optional closed: boolean

Returns { binormals: I3JS.Vector3[]; normals: I3JS.Vector3[]; tangents: I3JS.Vector3[] }

binormals: I3JS.Vector3[]

normals: I3JS.Vector3[]

tangents: I3JS.Vector3[]

copy

Parameters

source: I3JS.Curve<I3JS.Vector2>

Returns I3JS.Path

ellipse

Parameters