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.
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.
To create a curved spline, like what is shown in the preceding example, we need to take a couple of simple steps:
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
numPointsobject defines how many vertices we'll use to define the curve and the number of segments we use when rendering...