Chapter 339: CubicBezierCurve

Core Idea

A curve representing a 2D Cubic Bezier curve.

Key Concepts

• isCubicBezierCurve : boolean (readonly): This flag can be used for type testing.
• v0 : Vector2: The start point.
• v1 : Vector2: The first control point.
• v2 : Vector2: The second control point.
• v3 : Vector2: The end point.

Code Examples

const curve = new THREE.CubicBezierCurve(
	new THREE.Vector2( - 0, 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 );

• What it demonstrates: Typical usage of CubicBezierCurve.

Reference Tables

Constructor

Signature
new CubicBezierCurve( v0 : Vector2, v1 : Vector2, v2 : Vector2, v3 : Vector2 )

Properties

Property	Description
.isCubicBezierCurve : boolean (readonly)	This flag can be used for type testing.
.v0 : Vector2	The start point.
.v1 : Vector2	The first control point.
.v2 : Vector2	The second control point.
.v3 : Vector2	The end point.

Methods

Method	Description
.getPoint( t : number, optionalTarget : Vector2 ) : Vector2	Returns a point on the curve.

Key Takeaways

1. CubicBezierCurve extends: Curve
2. Most relevant properties: isCubicBezierCurve, v0, v1, v2.
3. Key methods: getPoint.

Connects To

• Curve: parent class
• Source: src/extras/curves/CubicBezierCurve.js