Deterministic Lines threejs example
I wanted to make a new threejs example that has to do with creating and mutating a group of lines. As of late I have also been playing around with tube geometry, which requires passing a curve as the first argument when making the geometry.
This example however will just be a project in which I continued with my last threejs example that also had to do with creating a group of lines. However the goal with the older example was just to create a group of lines that form a sphere of sorts, and then mutate things from there. With this example what I wanted to do is make a similar system of sorts, but to make it so that a group of lines that form a sphere is just one of many options. So in other words this is just a general kind of system for a group of lines that can be set into all kinds of various states beyond just that of a sphere like shape.
This Deterministic line group module threejs example and what to know first
Read up more on lines and line materials
The module that I have made that I am writing about can be used to create an instance of a threejs group where each child of the group is an instance of a line. A line in threejs is one alternative to that of the typical mesh object that is used to add content to an over all scene object. What is nice about lines is that when making a custom geometry I just have to worry about the position attribute of the geometry and that is it. There is also things like the index of the position attribute and also with lines the order of the points is of concern, but I do not have to care so much about the additional values that are needed when making geometry to be used with a mesh object and the various mesh materials.
Check out more on the buffer geometry class
One major aspect of this module has to do with setting and updating the position attribute of an instance of buffer geometry using the set from points method as well as an alternative method that is better for updating the geometry rather than creating it for the first time.
Source code is also up on Github
The source code that I am writing about here can also be found on github along with the source for my many other threejs example thus far.
Version numbers matter
When I first wrote this post I was using r140 of threejs, and the last time I came around to do some editing here I was using r146. The code in this post as working fine for me on my end with these revisions threejs on the various platforms that I use.
1 - First version of the line group module, type plugins, and demos
In this section I will be going over the source code of R0 of the line group module that helps me with the process of creating and updating a collection of lines that are children of a group. In the module itself I have a single built in line group type that I call ‘tri’ to mainly serve as a guide to knowing how to go about making a custom line group for the module. With that said in this section I will also be going over a number of types that I have worked out thus far to help get a better sense of what can be done with a module such as this as I am not going to want to bother with just the built in type alone of course. After writing about the module itself and the types that I have wrote thus far I will then also want to get into at least one if not more demos that make use of these features.
The line group module itself
The Line group module itself has a create, load, and set public methods thus far. The create method is what I call to create a new line group, the load methods is what I use to load a type of line group, and the set method is what to use to update the state of a line group with a given set of frame, maxFrame, and base data values to set the state of the line group.
Circle stack plug-in
I made a number of external plug-ins while making the first version of this module in order to just test out that the loading method works as a way to pull logic that has to do with a specific line group out of the module and into an external optional file. This module turned out similar to what I worked out for my sphere circles example, but I was thinkging more in terms of just a stack of circles that I am chaining in a way that does not have to form a sphere like shape when it came to making this one.
1.2 - Sphere Circles plug-in
The whole idea of this project was to make a module that provides a way to create a more flexible from of what I worked out for my lines sphere circles example where the collection of lines that I made for that example is just one way to go about using the module. So then I should be able to just quickly create a plug-in that is more of less the same code that I worked out for that example as a plug-in for this line group module and sure enough here it is and it seems to work fine just far.
1.1 - Demo of ‘tri’ built in type
To start out with when it comes to final demos of all of this there is just working out a very basic demo that just makes use of that built in type alone. So in this demo I am making use of just that alone, so this demo will work with just the line group module alone. So after creating my usual set of objects when it comes to things like the scene object, camera, and renderer I just need to call the create method to make a new line group. When doing so I could just not give any arguments to the create method, but I wanted to work out a few options for this so I pass tri as the type string, and then give the options object I want to use.
1.2 - Demo of sphere circles, circle stack, and tri
For the sake of this section then I now just want a little additional code that is a simple use case example of the built in line group type ‘tri’, as well as the two additional types that I have made thus far in the form of external fines to use with this module then.
This lines group module is shaping up to be what it is that I had in mind when I started working on it, but I am not sure if I would want to put much more time into further refining this project or not. I am sure that I would if I end up using this on a day to day basis that goes without saying, but I am not sure if that will end up being the case with this project thus far. In the event that I do start using something like this all the time I am currently of the mindset that I might want to do so with yet another example that is similar to this one, only it will involve the use of TubeGeometry rather than that of lines. Also I might want to go so far as to even make custom geometry, but in other case use curves as a way to create the geometry that would then be used with mesh objects.
There are a lot of things that I like about lines, but they do have there limitations. For one thing when it comes to setting the width of lines doing so will not work with all platforms. The main thing that I like to do with threejs is to make videos, so to address that I can just render my frames on platforms in which line thickness does work. However there is still just way more that can be done with mesh materials. However maybe I could still address some of these problems by making use of the shader material.