One major threejs example project that I made and also have made a few revisions of this far is my sequence hooks module that I use to break down a video project into several sequence objects. Anyway in a late revision of the example I added a feature that allows for me to add paths to be used for each sequence which gave me the idea to make a tool to help with the process of creating the data to use for these, thus I started this create path tool threejs example that I will be writing about here.
This is a post on a threejs example of a tool that can be used to create paths. There is a lot to be aware of before getting into making this kind of project that I will not be getting into detail in this post. However I will take a moment to write about a few key things that are closely related to this example, and like to other posts in which I do get into detail.
The base curve class is what I would want to use when it comes to creating my own custom curve object instances to use with threejs features such as the Tube geometry constrictor, or create arrays of vector3 objects to create a collection of points. The curve class can also be used to get a single Vector3 object that is along a curve by making use of a get point prototype method of the curve class. There are a lot of key details to be aware of which it comes to the base curve class then and how it can prove to be useful.
The Quadratic Bezier curve3 constructor is a great choice when it comes to just using a built in class and moving on
Although the base curve class is what I will want to use when it comes to making my own custom curves in space there are a number of built in options that also will work well for most common tasks. The main task that I want to do with this curve creation tool will be resolve just fine with the THREE.QuadraticBezierCurve3 class that works by giving a start, control and end option in space by way of Vector3 objects.
I would like to have a tool where I can orbit around a scene and then click and drag mesh objects around to adjust the state of a curve. So then this project will make use of the orbit controls file that can be found in the threejs Github repository. That is that this is a feature that is not baked into the core of the threejs library itself but rather must be added on top of the library. If you want to read up more on orbit controls I have wrote a post on this before hand.
In this threejs example I want to click and drag mesh objects in a scene and use the position property of the object to set the start, control, and end points of a curve. I am doing this by making use of the raycaster class which is very useful for this sort of thing.
This threejs example started as one of my r140 demos in my test threejs repository on github. I also have my for post folder set up where I will be parking any and add future revisions of this project that I might get to at some point when and if I get the time to do so.
When I first started this post I was using r140 of threejs.
In this section I will be writing a thing or two about the first prototype of this path creation tool where I just mutate the start control and end points of a single quadratic curve3 object. Event when it comes to doing that alone though there are still a few things to be aware of. For example there is how to go about clicking a mesh object to begin with, when it comes to that there is of course using the raycaster class. Another thing it how to go about getting a visual idea of what is going on with the current state of the curve, for this I can use the get points method of the curve class to get an array of Vector3 objects that I can then use with the set from points method of the buffer geometry class to create a geometry that I can then use with THREE.Points. Still the goal here is to keep things as simple as possible and just get the core idea of what I want to work.
After the usual set of objects are set up in terms of the scene object, camera, and renderer I have a main state object for the tool. This is where I am parking a reference to the Orbit controls, as well as the raycaster that I am using to find out if a mesh was clicked or not. I am also storing all the other application state setting here for now as well, such as the current axis to which I will be moving an object along and also if I will be in snap mode or not.
WHe this example is up and running I have my three mesh objects and the current state of the points displayed. When I click and drag one of the mesh objects to a new location that updates the state of the curve. So then I more or less all ready have the core idea of what I want up and running just fine. However there is a great deal more work to do if I am going to be using this as a regular tool to help me in the process of defining paths to use for video projects. I will want to add methods to help export the results in a from that I can copy and paste into the source code of a video project, or create an export to json feature and update the other projects that I intent to use with this to read that JSON for example. However there may be a a lot of other little details I will want to fix before I even get to that point.
Event with what I have together thus far I am ready have the core idea of what I want working, but now the question is do I put more time into this in order to add the additional features that I want. It would be nice to have some kind of tool in which I can adjust things my just clicking and dragging mesh objects as a way to change the start point, end point, and control point. However I have found that I can also just manually define these when working out the source code for a video project also, and doing so is not all that time consuming thus far.
I have found that if I use a tool often enough I will get around to making improvements to it now and then, otherwise it will just be yet another one of my unfinished projects that is just the core idea up and running and that is it.