CubicBezierCurve

Create a smooth 2d cubic bezier curve, defined by a start point, endpoint and two control points.

Code Example

const curve = new THREE.CubicBezierCurve(
    new THREE.Vector2( -10, 0 ),
    new THREE.Vector2( -5, 15 ),
    new THREE.Vector2( 20, 15 ),
    new THREE.Vector2( 10, 0 )
);
const points = curve.getPoints( 50 );
const geometry = new THREE.BufferGeometry().setFromPoints( points );
const material = new THREE.LineBasicMaterial( { color : 0xff0000 } );
// Create the final object to add to the scene
const curveObject = new THREE.Line( geometry, material );

Hierarchy

I3JS.Curve<I3JS.Vector2>
- CubicBezierCurve

Index

Constructors

constructor

Properties

Methods

Constructors

constructor

new CubicBezierCurve(v0: I3JS.Vector2, v1: I3JS.Vector2, v2: I3JS.Vector2, v3: I3JS.Vector2): I3JS.CubicBezierCurve
new CubicBezierCurve(): I3JS.CubicBezierCurve

Inherited from Curve.constructor
- Defined in lib/threejs-library/types/three/extras.ts:652
Parameters
- v0: I3JS.Vector2
  
  – The starting point.
- v1: I3JS.Vector2
  
  – The first control point.
- v2: I3JS.Vector2
  
  – The second control point.
- v3: I3JS.Vector2
  
  – The ending point.
Returns I3JS.CubicBezierCurve
Inherited from Curve<Vector2>.constructor
- Defined in lib/threejs-library/types/three/extras.ts:120
This constructor creates a new Curve.

Returns I3JS.CubicBezierCurve

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

type

type: string

default: 'CubicBezierCurve'

v0

v0: I3JS.Vector2

The starting point.

default: new THREE.Vector2()

v1

v1: I3JS.Vector2

The first control point.

default: new THREE.Vector2()

v2

v2: I3JS.Vector2

The second control point.

default: new THREE.Vector2()

v3

v3: I3JS.Vector2

The ending point.

default: new THREE.Vector2()

Methods

clone

clone(): I3JS.CubicBezierCurve

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

Returns I3JS.CubicBezierCurve

computeFrenetFrames

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

Inherited from Curve.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.CubicBezierCurve

Inherited from Curve.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.CubicBezierCurve

fromJSON

fromJSON(json: object): I3JS.CubicBezierCurve

Inherited from Curve.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.CubicBezierCurve

getLength

getLength(): number

Inherited from Curve.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 Curve.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 Curve.getPoint
- Defined in lib/threejs-library/types/three/extras.ts:139
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 vector for a given position on the curve.

getPointAt

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

Inherited from Curve.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 Curve.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 Curve.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 Curve.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 Curve.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 Curve.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

toJSON

toJSON(): object

Inherited from Curve.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 Curve.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

v0: I3JS.Vector2

v1: I3JS.Vector2

v2: I3JS.Vector2

v3: I3JS.Vector2

Returns I3JS.CubicBezierCurve

Returns I3JS.CubicBezierCurve

Properties

arcLengthDivisions

type

v0

v1

v2

v3

Methods

clone

Returns I3JS.CubicBezierCurve

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.CubicBezierCurve

fromJSON

Parameters

json: object

Returns I3JS.CubicBezierCurve

getLength

Returns number

getLengths

Parameters

Optional divisions: number

Returns number[]

getPoint

Parameters

t: number

Optional optionalTarget: I3JS.Vector2

Returns I3JS.Vector2

getPointAt

Parameters

u: number

Optional optionalTarget: I3JS.Vector2

Returns I3JS.Vector2

getPoints

Parameters

Optional divisions: number

Returns I3JS.Vector2[]

getSpacedPoints

Parameters

Optional divisions: number

Returns I3JS.Vector2[]

getTangent

Parameters

t: number

Optional optionalTarget: I3JS.Vector2

Returns I3JS.Vector2

getTangentAt

Parameters

u: number

Optional optionalTarget: I3JS.Vector2

Returns I3JS.Vector2

getUtoTmapping

Parameters

u: number

distance: number

Returns number