This lerp method can just be called off of an instance of Vector3, and when doing so the point I want to lerp to can be passed as the first argument, and an alpha value can then also be passed as a second argument. This alpha value is just simply a value between 0 and 1 that is a magnitude between these two points that the vector should be changed. Often I will not want to just use the lerp method alone though, often I use it in combination with other vector3 class methods such as the clone, copy, and set methods. There is also a thing or two to say about how to go about coming up with alpha values, and other alternatives for moving a point in space from one point to another.
There are a lot of other methods in the Vector3 class that are also work checking out in greater detail. Many of these methods will be used in the various source code examples in this post, so there is a lot to look into with the various other methods in order to start doing things that are interesting with lerping. For example often I will not want to just call lerp off of a Vector3 instance, I might want to clone it first which is another Vector3 class method that will return a copy of the Vector3 so I then lerp off of that copy rather than mutating the state of a source vector3.
The source code examples in this post can also be found in my test threejs Github repository. This is also where I park the source code examples for my many other blog posts on threejs as well. Also cloning down the repo, installing packages and starting the server might be the best way to quickly get these examples and many more working on your end.
When I first wrote this post I was using r135 of threejs, and the last time I came around to do some editing I was using r146. A lot has been changing with threejs as of late, and there is now even more to write about when it comes to the deal with revision numbers. As of this writing I am still sticking to using old script tags over that of JSM. That will have to change at some point as three.min.js will no longer be supported in a future revision. There is also the fact that code breaking changes are made in fairly often so if things so not working so great on your end that would be the first thing I would check.
For this basic section example I will be setting the position of just one mesh object with two vector3 class objects along with copy and of course the lerp vector3 class prototype methods. The v1 Vector3 is then the start point that I want and with that I can use the copy method to copy the values of this vector3 to the vector3 of the position property of the mesh object. After that I can use the lerp method to set the position to a point that is say in quarter of the way between v1 and v2 by passing v2 as the first argument and the 0.25 as the alpha value.
In this section I will be going over some examples that have to do with creating an array of vectors class objects with the helper of the lerp method. There is then all kinds of things that can be done with a collection of Vector3 class objects such as creating a line in space.
2.1 - Using the Vector3 clone, lerp, and add methods to create lines with an array of Vector3 instances
A few years back I wrote a post on the subject of lines in threejs which is an alternative to using a Mesh object in which I am just dealing with lines in 2d space. Anyway the general way that I would go about making a line is to create an array of Vector3 class instances and then pass that array to the set from points method of the buffer geometry class. I can then use the resulting geometry with the THREE.Line constructor along with a choice in line materials to create a line object that I can then add to the scene object.
So sense the process of creating a line involves making an array of Vector3 class instances I can then use the clone method alone with lerp as a way to draw a line in space. This however will result in a straight line though which kind of defeats the purpose of having a lengthly array of points if they are all on the same slop though. However I can of course just use the lerp method as part of the process of creating the points along with a method like the add method of the vector3 class which I can use to ad deltas to points that are along the straight line if that makes any sense.
Another cool method of the Vector3 class is the apply Euler method, and speaking of the apply Euler method there is also the Euler class as well. The Euler class is like the Vector3 class only it has to do with angles rather that Vectors, for example the rotation property of anything based off of object3d is an instance of Euler.
Anyway for this example of the vector3 lerp method I wanted to just do something with the lerp method combines with the apply Euler method and add methods of the Vector3 class. The result this time is a weird and interesting kind of line that I made with these methods.
The lerp method is a great little tool, but there are some alternative options when it comes to curves, at least when it comes to moving objects around in a scene. The same effect that can be done with the Vector3 lerp method can also be done with THREE.LineCurve3 and the get point method of the base curve class along with the copy method of the Vector3 class. However there are also a number of other options when it comes to creating curve objects that allow for one or more control points in space as well.
To start out with this there is making a curve that is actually just a line. This might not really be a curve in a sense, but it is a object that has all the base curve class prototype methods such as the get point method that will return a vector3 object along this line. Also I would like to start this section off with a basic example and what is nice about THREE.LineCurve3 is that is just needs to vector3 objects when calling it which are a start point and an end point.
So then the same thing can be done more or less with curves, but the nice thing about curves is that there are of course other built in options for them other than THREE.LineCurve3.
So I have covered the basic example using LineCurve3 that can be used to do more or less the same thing as with the lerp method, but now it is time to see about making use of one of the other built in curve options that allow for one or more control point arguments. When making the control point vectors I can make use of vector3 class methods like clone and lerp to create a new vector3 from the start vector3, and then lerp to a point along a straight line that is half way or another other point that is a good place to start depending on the number of control points.
In order to really gain a good sense of what the lerp method is all about I should work out at least a few if not more animation examples. these are then examples in which I am using the vector3 lerp method, but also many other tools to create animation loop projects. There is starting out with simple ones, but then also exploring all kinds of other use case examples with this feature of the library.
For this basic animation loop example of the Vector3 lerp method I will be using the vector3 set method as a way to set the position property of a mesh object to a given home location of 5,0,0 and then use the lerp method to lerp from 5,0,0 to -5,0,0 over the course of a certain number of frames and back again. The end result is then a basic hello world style example of what the lerp method is all about I have two points in which I want to move an object between based on a value between 0 and 1.
So that is the basic idea of what the lerp method is for, now the rest of this post will just be yet even more examples that branch off of this lerp method.
Now that I have the basic example out of the way it is clear what the lerp method does, but now there is the question of how to go about lerping in a way that is not so linear. One way would be to just go about working out some kind of expression for the alpha value that makes used of the Math.pow method for example.
The lerp method is then a great way to go about transitioning the state of one Vector3 to another state of Vector3. However depending on how I want to go about transition the state of a Vector3 class instance I often will nit want to just use the method alone, but in combination with other Vector3 class methods as well as various core javaScritp features as well.