Sphere circles Lines threejs example
I can then also add a method that can be used to update the state of this group of lines with a new set of options as a way to make various kinds of animations. So there is starting out with the basic idea of what i want to do, and then also maybe make a kind of module form of this example. Once I have a module form of this genera idea I can then make all kinds of additional demos that make use of the module to create, and update the state of the lines.
Sphere Circle Lines threejs example and what to know first
Read up more on the THREE.Line constructor, and buffer geometry
In this example I am creating an instance of THREE.Group and adding a bunch of Lines as children for this group. The THREE.Line object is one of several alternative options to the usual THREE.Mesh object when it comes to adding objects to a scene that contain some kind of content. What is nice about lines is that I only have to worry about the position attribute of the buffer geometry objects that I make when it comes to custom geometry. This allows for me to just focus on how to go about placing points in space in a certain order, and not working about everything else that needs to happen in order to make a mesh friendly geometry.
Check out Buffer geometry and Vector3 classes
In this example I am creating an array of Vector3 class instances and then passing this array to the set from points method of the buffer geometry class as a way to create a geometry. I am then passing the resulting geometry along with a line material as arguments of the three line constructor. So then there is taking a moment tot read up more on the buffer geometry class as well as the Vetor3 class if yo have not done so before hand. There are a lot of useful methods in the buffer geometry class such as this set from points method, and the Vector3 class also has a lot of great stuff to work with when it comes to playing around with vectors.
The source code is also on Github
The source code examples that I am writing about in this post can also be found in my test threejs repo.
Version Numbers matter
I was using r135 when I first wrote this post, and the last time I cam around to do some editing I was using r146.
1 - Getting the general idea working first ( r0 )
2 - Stand alone module, and for point methods for mutation of points ( r1 )
2.1 - A stand alone module for this
2.1 - A seaShell like shape demo
One of the coolest feature thus far though is the for point option that I can use to mutate the state of the array of points to use to create the lines. I have a few built in options for this that I can use by providing a string for the name of the built in for point method, but I can also work out custom methods as needed as well by using a function for the value of the option. In this demo of the module I cam also using my set by frame method as a way to mutate the state of a group of lines that uses the built in sea shell for point method that I made while playing around with things.
2.2 - Random points example
Another option then is to use the seeded random built in for point method of the module. The seeded random method is one of many methods to work with in the math utils object of the core of the threejs library. This seeded random method is like that of the math random method only it will give the same result when called for the first time.
2.3 - Can still do a plain sphere like shape
I can still to just a plain sphere like shape by just going with the default for point method of the module. So for this example I went with just making a very simple static scene that does not even involve an app loop, or the updating of the geometry over time. When making the options object that will be passed to the create method I can just not give any option at all for the for point method which will result in the default sphere like shape for all the lines. I can then adjust things when it comes to radius, the number of circles in the group, points per circle, and the thickness of the lines.
2.3 - Rotaiton of lines, whole group, and custom for point method
For this example I just wanted to make a cool looking effect where I rotate and scale each line in the group. On top of that i also made a custom for point method when it comes to setting up the options object to use for this one. The end result is more or less what I wanted which is a pretty cool looking over all effect.