Graphics Reference
In-Depth Information
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 the tube. The
start
vector defines the position where we want to start the curve, the
end
vector determines the end point of our curve, and finally, the
middle
vec-
tor defines the height and center point of our curve. If we, for instance, set
numPoints
to
5
, we get a different kind of curve.
2. Now that we've got the
start
,
end
, and
middle
vectors, we can use them
to create a nice curve. For this, we can use an object provided by Three.js,
called
THREE.QuadraticBezierCurve3
:
var curveQuad = new
THREE.QuadraticBezierCurve3(start,
middle, end);
Based on this
curveQuad
, we can now create a simple tube geometry.
3. To create a tube, we use
THREE.TubeGeometry
and pass in
curveQuad
,
which we created in the previous step:
var tube = new
THREE.TubeGeometry(curveQuad, numPoints,
