Curves

Line Segment

A straight line which links two points without extending beyond them. A line segment is one-dimensional. It has a measurable length, but has zero width. we’ll have to start using a technique called Line Segment.

We'll modify one of our first samples. All we need to do is create some vertices use Line and BufferGeometry. Call its setFromPoints method to set the vertices of lines.

Here is the code that we will use:

var scene = new THREE.Scene();

Next thing we will do is define a material. For lines we have to use LineBasicMaterial or LineDashedMaterial.

// Create a blue LineBasicMaterial
var material = new THREE.LineBasicMaterial ({ color: 0x0000ff });

After material we will need a geometry with some vertices:

var points = [];
points.push ( new THREE.Vector3 (-10, 0, 0) );
points.push ( new THREE.Vector3 (0, 10, 0) );
points.push ( new THREE.Vector3 (10, 0, 0) );
var geometry = new THREE.BufferGeometry ().setFromPoints( points );

Note that lines are drawn between each consecutive pair of vertices, but not between the first and last (the line is not closed.)

Now that we have points for two lines and a material, we can put them together to form a line.

var line = new THREE.Line (geometry, material);

All that's left is to add it to the scene and call render.

scene.add( line );
renderer.render( scene, camera );

Curves

Cubic Bézier curve

A Bézier curve is a parametric curve used in computer graphics and related fields. The curve, which is related to the Bernstein polynomial, is named after Pierre Bézier, who used it in the 1960s for designing curves for the bodywork of Renault cars. Other uses include the design of computer fonts and animation. Bézier curves can be combined to form a Bézier spline, or generalized to higher dimensions to form Bézier surfaces. The Bézier triangle is a special case of the latter.

Bézier curves can be generated under the control of other points. Approximate tangents by using control points are used to generate curve.

Bézier Curves can be broadly classified into three categories: Linear Bézier curves, Quadratic Bézier curves and Cubic Bézier curves.

Properties of Bézier Curves
Bézier curves have the following properties:

  •  They generally follow the shape of the control polygon, which consists of the segments joining the control points.
  •  They always pass through the first and last control points.
  •  They are contained in the convex hull of their defining control points.
  •  The degree of the polynomial defining the curve segment is one less that the number of defining polygon point. Therefore, for 4 control points, the degree of the polynomial is 3, i.e. cubic polynomial.
  •  A Bézier curve generally follows the shape of the defining polygon.
  •  The direction of the tangent vector at the end points is same as that of the vector determined by first and last segments.
  •  The convex hull property for a Bézier curve ensures that the polynomial smoothly follows the control points.
  •  No straight line intersects a Bézier curve more times than it intersects its control polygon.
  •  They are invariant under an affine transformation.
  •  Bézier curves exhibit global control means moving a control point alters the shape of the whole curve.
  •  A given Bézier curve can be subdivided at a point t=t0 into two Bézier segments which join together at the point corresponding to the parameter value t=t0.

Create a smooth 3d Cubic Bézier curve, defined by a start point, endpoint and two control points.

Here is the code that we will use:

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

Create a smooth 3d Quadratic Bézier curve, defined by a start point, endpoint and a single control point.

Here is the code that we will use:

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

Spline curve

In mathematics, a spline is a special function defined piecewise by polynomials. In interpolating problems, spline interpolation is often preferred to polynomial interpolation because it yields similar results, even when using low degree polynomials, while avoiding Runge's phenomenon for higher degrees.

In the computer science subfields of computer-aided design and computer graphics, the term spline more frequently refers to a piecewise polynomial (parametric) curve. Splines are popular curves in these subfields because of the simplicity of their construction, their ease and accuracy of evaluation, and their capacity to approximate complex shapes through curve fitting and interactive curve design.

Create a smooth 2d Spline curve from a series of points. Internally this uses Interpolations.CatmullRom to create the curve.

See the code:

// Create a sine-like wave
var curve = new THREE.SplineCurve (
new THREE.Vector2 (-10, 0),
new THREE.Vector2 (-5, 5),
new THREE.Vector2 (0, 0),
new THREE.Vector2 (5, -5),
new THREE.Vector2 (10, 0)
);
var points = curve.getPoints ( 50 );
var geometry = new THREE.BufferGeometry ().setFromPoints( points );
var material = new THREE.LineBasicMaterial ({ color: 0x0000ff });
// Create the final object to add to the scene
var curveObject = new THREE.Line (geometry, material);

Demo

Curves

Project download  curves.zip