ShapePath.bezierCurveTo()

Introduction

The ShapePath.bezierCurveTo() method is used in the Three.js library to add a cubic Bezier curve segment to a ShapePath object. A cubic Bezier curve is defined by four control points: the starting point, two "handle" points, and the ending point. The curve smoothly interpolates between the starting and ending points, following the directions given by the handle points.

Syntax

ShapePath.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Parameters

• cp1x: The x-coordinate of the first control point.
• cp1y: The y-coordinate of the first control point.
• cp2x: The x-coordinate of the second control point.
• cp2y: The y-coordinate of the second control point.
• x: The x-coordinate of the end point.
• y: The y-coordinate of the end point.

Example

The following code shows how to create a ShapePath object with a cubic Bezier curve segment:

const shapePath = new THREE.ShapePath();
shapePath.moveTo(0, 0);
shapePath.bezierCurveTo(50, -50, 100, 50, 150, 0);

This code creates a curve that starts at the point (0,0) and ends at the point (150,0), with handle points at (50,-50) and (100,50).

Conclusion

The ShapePath.bezierCurveTo() method is a useful tool for creating smooth curves in Three.js. By setting the control points, you can create curves of varying shapes, from gentle slopes to sharp bends.