Creating a spline curve between two points

When you create visualizations and, for instance, want to visualize the flight path of an airplane, drawing a curve between the start and end point is a good approach. In this recipe, we'll show you how you can do this using the standard THREE.TubeGeometry object.

Getting ready

When you open the example for this recipe, 02.12-create-spline-curve.html, you can see a tube geometry that curves from start to end:

In the upcoming section, we'll explain step by step how to create this curve.

How to do it...

To create a curved spline, like what is shown in the preceding example, we need to take a couple of simple steps:

1. The first thing we need to do is define some constants for this curve:

     var numPoints = 100;
     var start = new THREE.Vector3(-20, 0, 0);
     var middle = new THREE.Vector3(0, 30, 0);
     var end = new THREE.Vector3(20, 0, 0);

   The numPoints object defines how many vertices we'll use to define the curve and the number of segments we use when rendering...