How to make Bézier curves in Three.js

Three.js is a JavaScript library that utilizes WebGL to render stuff on the web. It is like a superpower that lets us effortlessly add mind-blowing 3D graphics to our websites and applications. With Three.js, we can turn our web browser into a canvas for 3D art, games, data visualization, and so much more.

Along with the many functionalities Three.js has to offer, it also allows us to draw Bézier curves on the screen. Bézier curves are a mathematical technique used to create smooth and elegant curves in digital drawings, animations, and fonts. They’re like the magician’s wand of graphic design. With Bézier curves, we have precise control over the shape of our lines, making it easy to craft everything from sleek logos to graceful animations with finesse and precision.

Note: To learn more about Three.js and Bézier curves, check out the following Educative answers. Happy learning!

Bézier curves in Three.js

Three.js allows us to create quadraticCurves of degree 2 and cubicCurves of degree 3 Bézier curves. The types of Bézier curves that we can create using Three.js are the following:

  • QuadraticBezierCurve()

  • QuadraticBezierCurve3()

  • CubicBezierCurve()

  • CubicBezierCurve3()

We will now explore each method in detail, along with its syntax.

The QuadraticBezierCurve() method

This method allows us to create a 2D Bézier curve with one start point, one end point, and one control point. Here’s how we can use the constructor:

const curve = new THREE.QuadraticBezierCurve(
	new THREE.Vector2( x1, y1 ),
	new THREE.Vector2( x2, y2 ),
	new THREE.Vector2( x3, y3 )
);
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 );

As we can see, the constructor for the QuadraticBezierCurve() takes in three Vector2 arguments that define the coordinates of the curve. We then use the getPoints() method to define how many points will be interpolated across our curve.

The QuadraticBezierCurve3() method

We can use this method to create a 3D Bézier curve with one start point, one end point, and one control point. The syntax to use it is shown below:

const curve = new THREE.QuadraticBezierCurve3(
	new THREE.Vector3( x1, y1, z1 ),
	new THREE.Vector3( x2, y2, z2 ),
	new THREE.Vector3( x3, y3, z3 )
);
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 );

Now, as we can see, this method is quite similar to the QuadraticBezierCurve() method, except it takes Vector3 objects as arguments instead of Vector2. The coordinates of this curve are defined in three dimensions instead of two. We then use the getPoints() method to define the number of points that will be interpolated across our curve.

The CubicBezierCurve() method

This method allows us to create a 2D Bézier curve with one start point, one end point, and two control points. Here’s how we can use it:

const curve = new THREE.CubicBezierCurve(
	new THREE.Vector2( x1, y1 ),
	new THREE.Vector2( x2, y2 ),
	new THREE.Vector2( x3, y3 ),
	new THREE.Vector2( x4, y4 )
);
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 );

The CubicBezierCurve() method takes in four arguments instead of three. All of them are Vector2 objects which define the coordinates of the curve. Similarly, we also define the number of points that we want to interpolate across the curve by using the getPoints() method.

The CubicBezierCurve3() method

We can use this method to create a 3D Bézier curve with one start point, one end point, and two control points. The syntax is shown below:

const curve = new THREE.CubicBezierCurve3(
	new THREE.Vector3( x1, y1, z1 ),
	new THREE.Vector3( x2, y2, z2 ),
	new THREE.Vector3( x3, y3, z3 ),
	new THREE.Vector3( x4, y4, z4 )
);
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 );

As expected, this method takes in four arguments but they are all Vector3 objects that represent the coordinates of the curve in a 3D plane. We then use the getPoints() method to interpolate the points across the curve.

2D Bézier curve demonstration

Given below is a small project that you can play around with and create your own custom 2D Bézier curves. You can also adjust the values of the four Vector2 objects in the CubicBezierCurve() constructor to see how that affects the curve.

Explanation

Note: The index.js and index.html files contain the boilerplate code to set up a scene in Three.js.

  • Line 11: We use the AxesHelper class to visualize the coordinate plane and help us better understand the placement of our Bézier curve.

  • Lines 14–25 & 29–39: Here, we finally use the syntax that was shared above, and add the Bézier curve in the scene.

3D Bézier curve demonstration

Similarly, we can check out the 3D Bézier curves in action here. You can play with the values below and see how your changes affect the curves.

Explanation

  • Lines 14–24 & 26–35: Here, we can see the Bézier curves being created as shown in the syntax above.

Conclusion

Bézier curves in computer graphics are used in various applications such as modeling 3D models and also in adding curves to text. They’re mathematically easy to compute and save a bunch of computation power. As you delve deeper into Three.js, mastering Bezier curves opens the door to limitless creative possibilities. Explore this artistry and unlock the full potential of Three.js.

Free AI Mock Interviews
Coding Interview
Coding PatternsFree Interview
Gain insights and practical experience with coding patterns through targeted MCQs and coding problems, designed to match and challenge your expertise level.
System Design
You TubeFree Interview
Learn to design a video streaming platform like YouTube by tackling functional and non-functional requirements, core components, and high-level to detailed design challenges.

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved