Graphics Reference
In-Depth Information
In this function, we use
spline.getPointAt(pos)
to determine where on
the
THREE.SplineCurve3
path we need to position our light. With
pos
at
0
, we're at the beginning of spline and with
pos
at
1
, we're at the end. This
way, we slowly (in steps of
0.001
) move the light along the spline.
4. All that is left to do is call the
positionLight
function from the render func-
tion:
function render() {
renderer.render(scene, camera);
positionLight();
orbit.update();
requestAnimationFrame(render);
}
As the render function is called approximately 60 times per second and we take 1000
steps for our complete path, the light will move along the complete path in about 17
seconds.
How it works...
When you instantiate a
THREE.SplineCurve3
object, you pass in an array of
THREE.Vector3
objects. Three.js internally interpolates these points to create a flu-
id curve that moves through all these points. Once the curve is created, you have two
ways to get positions. You can use the
getPointAt
function, as we did in this re-
cipe, to get a relative position based on the provided parameter, from
0
to
1
, and the
length of the curve. Alternatively, you can also use the
getPoints
function, where
you specify, as the parameter, in how many points the line should be divided.
There's more…
In the
Getting ready
part of this recipe, we showed you an example where a light
moved through a scene. What you could see was that we also showed the path
along which the light moved. To do this for yourself, you can use the
getPoints
function from the created
THREE.SplineCurve3
object to create a
THREE.Line
object:
