The Curve class and tube geometry in threejs
The curve class and what to know first.
There is looking into lines first, maybe
Getting into the use of the curve class and the typically corresponding tube geometry constructor seems like the next step from creating lines. One nice thing about lines is that I am create them by making an array of vector3 class instances by making use of the set from points method of the buffer geometry class. However there are limitations with lines compared to what there is work with when it comes to mesh objects, so that leads one to look into the curve class and tube geometry.
Check out my other posts on curves in threejs
I have a number of other posts that I have wrote on curves now such as my post where I am using curves to create and update custom geometry. I also started a threejs example post that is on a curves module.
Source Code is up on Github
I have the source code that I am writing about in this post also up on my test threejs repo on Github.
Version Numbers matter
When I first started this post I was using r140 of threejs.
1 - Basic Curve Examples
To start out with Curves in this section I will be going over some fairly simple getting started type examples of Curves. This will include some examples that make use of built in curve function examples, as well as at least one that has to do with creating a custom curve class.
1.1 - Line Curve Example with Points
There is a Line Curve 3 class that is one built in option for cretaign a curve. This is just making an instance of a curve that is just a line between two points, but it is still an instance of a curve. So then this can be used in any situautin that i need a curve object that is just a line actually.
1.2 - Bezier Curve Example with Points
Although I can quickly create a curve that is a line actually I will typically want to use the Bezier Curve Built in Curve object function to create lines as well as curves in general. I make the kinds of curves that I will like to make as well as a straight line depending on the control point that I give when calling it.
1.3 - Making a Custom THREE.Curve and THREE.TubeGeometry example
When it comes to the curve and tube geometry constructors in threejs one has to start somewhere, so for this example I will be doing just that with the THREE.Curve constructor and the tube geometry constructor. For this example I am starting out with the usual features when it comes to things like setting up a scene object, camera, and renderer. In additional the the usual features I am also adding a light source as I will be going with the standard material for this example when setting up the mesh object that will use the tube geometry later.
When it comes to using the curve base class I will want to extend the base class and define a constructor as well as a get point method. It is in this get point method that I will be defining the logic that is used to create the curve. For this basic example I am just making as simple curve using the Math.pow method for the y values for each point, alone with just simple linear stepping for x values, and for now just leaving z values at zero.
Once I have a new class created by extending the base curve class I can then use this class to create a new curve object. This curve object can then be passed to the tube geometry constructor as the first argument for that constructor. The resulting geometry from calling the tube geometry class constructor can then in turn be used with a mesh object just like that with the various other built in geometry constructor functions.
2 - spiral example
So now that I have a basic example out of the way that involves creating a custom curve class by extending the base curve class out of the way I think I will want to have at least one more example that involves something like a spiral of sorts. This example is then very similar to the basic example I have starting out with, but now I am using sin and cos math methods for the expressions in the get point method.
3 - The buffer geometry copy method an a basic animation example using a curve
Thus far I just have some static scene examples of this curve class out of the way, so then I should have at least one example that involves an animation loop then. One way to go about doing this might involve creating a new curve object with update arguments in the body of the loop that I can then use to make an updated geometry. In can then make use of the copy method of the buffer geometry instance in the mesh object to copy this update geometry to the geometry object instance of the mesh objects as a way to update the geometry.