Today I thought I world write another post on a built in geometry constructor in three.js, this time the Torus Geometry Constructor which results in a donut like shape. There are many interesting things about the geometry of a torus in general that are worth looking into in detail. It is a shape that is composed of a collection of circles where each circle is positioned and rotated around a point that results in the formation of a tube that in turn is a kind of 3d circle. So then there are two general arguments of concern that come up with this when it comes to the number of sides of each circle, and the number of circles, as one might expect these values can be tweaked when calling the geometry constructor.
The torus geometry constructor is of course just one option when it comes to the many built in geometry constrictors there are to work with in three.js. The Sphere, plane, and Box geometry constructors are all also worth checking out in detail if you have not done so before hand. There is a lot to learn about these constructors and not just with respect to how to just call the function and pass a few arguments when calling them. In the long run sooner or later in make sense to look into the buffer geometry constructor and how to create a custom geometry.
The source code examples that I am writing about in this post are also on Github.
When I first made the source code for these examples and wrote this post I was using r127 of three.js, and the last time I came around to do some editing I was using r140. I do not think a lot of changes have been made to the torus geometry constructor that will case code breaking changes, but still in the future many such changes might happen to other features of the library that I am using.
To start out with there is just making a simple hello world type demo of the Torus Constructor with a simple example that is just one mesh object. So in this getting started type section I will be starting out with an example just like that. After that I will want to also write about a few more basic examples that mainly just have to do with the arguments that there are to work with when calling the torus geometry constructor function.
When calling the THREE.TorusGeometry constructor function the first argument is the main radius of the torus as a whole, while the second argument is the radius of each circle in the torus or the tube radius if you prefer. The next two arguments of the constructor are to set the number of circles in the torus, and how many sides per circle.
Once I have my torus geometry I can then pass it as the first argument to the mesh constructor, and pass a material as the second argument for the mesh constructor and then add the resulting mesh to a scene object. After that I just need to set up a camera and a renderer for this example.
Now that I have the very basic, easy example out of the way I think I should get into at least one or more additional examples that are maybe not so basic. For this example I am using the copy method of the buffer geometry class to copy the state of a new torus geometry to the older torus geometry of a mesh object. I can not say that this is the best way to go about updating a geometry, however it will still work okay when it comes to having a way to run threw a range of values when it comes to the various torus geometry arguments.
An alternative to using a Mesh object would be to use the Points Constructor. When doing so I am restricted to using just the points material that just has a few options such as setting the size and color. Although using the points constructor might be cool for just getting an idea of what is going on with the points of a geometry it might not be the best option as far as how things look. There is doing something where I am creating a mesh object for every point in a torus geometry and then doing whatever I want when it comes to all the various options with mesh materials, but that will be a log of objects and other resources.
The basic idea of this with the THREE.Points Constructor is not all that different from that of the mesh object in the scene that I just pass the geometry as the first argument. The main difference is that I only have one option when it comes to materials which is the points material. When using the points material I will often want to reduce the side of the points to something fairly small, this is really true if I make a geometry that has a great number of points in it.
Although the Points constructor is great it does have its draw backs when it comes to how things look. So then there is the question of using the position attribute of the buffer geometry made with the Torus geometry constructor to create a mesh for each point in the position attribute. For this example I am using the getX, getY, and getZ methods of the buffer Attribute class of the position attribute of a torus geometry to set the position for mesh objects that will be created for each point in the torus geometry.
This might take some leg work, and also eat up some resources compared o using the THREE.Points constructor. But now I am using mesh objects which means that I can make a sphere geometry fro each mesh, and also using any materials that I want such as the phong material. For this I am also adding some light sources using a directional light and some ambient light.
In this section I will now be going over some examples that have to do with creating and working with a group of mesh objects using the torus geometry constructor. There are all kinds of ideas that come to mind when it comes to having a little fun with this kind of geometry constructor. Such as having a collection of doughnut shape mesh objects arranged in a circle and having the camera move threw the holes of each of them. There is also just creating a collection of mesh objects with all kinds of different values for the various arguments for radius and the number of sections. There is really getting into this sort of things and making cool animations and so forth, but for this section I will be keeping this with just a few examples to start out with.
So now there is an idea that I just have to do with this because it is just a cool thing to do when it comes to just playing around with three.js. In this example I am once again creating a group of mesh objects that are using the torus geometry constructor but this time I am positing each of them in a circle, so then all the torus objects then begin to from another torus of sorts out of torus objects. I am then creating an animation loop, and moving the camera so that it passes along the the holes of each torus mesh object which results in a cool effect.
Just like my other group example of doughnut mesh objects I have a create doughnut child helper that also gets the same arguments. This time I am playing around with the expressions a little in a different way, and I am also making use of the standard material this time because I want to do something with light for this one. Another thing that I am doing differently with this create doughnut child method is that I am rotating the geometry of the torus so that when I create the group they are all aliened in a way that I want so that I can have a camera move threw them by just having the camera move along the circumference of a circle.
There are a great number of other ways that I can play around with this kind of example to make all kinds of interesting animations. Another idea that might be nice is to have the torus mesh objects rotated in a way so that all the holes are facing the center rather than each other and have the camera weave in and own in a sine wave like pattern.
In this example I am creating a group of mesh objects where each mesh object is created with a create doughnut helper method to which I pass two arguments one of the current child index, and the other for the total number of children in the group. Then for each child I am increasing the number of segments for the radial and tube segments for each child as the child index value goes up. This is then another example in which I want to get an idea of what the differences are when adjusting the various arguments when making a torus geometry.
The torus geometry constructor is a fun geometry constructor to play around with when it comes to making a few quick examples and getting a feel for how to make some interesting animations with three.js. There is many other little details to work with here and there also when it comes to a lot of these examples. For example there is learning how to work with not just the torus geometry, but geometry in general when it comes to rotating them, and working with the various properties of a geometry. There is also not just the geometry, but the objects that contain the geometry, and groups of such objects when it come to the Mesh constructor and the Object3d class that it is based on.
I have wrote down a lot of notes in my todo list for this post, and next time I come around to editing this post I sure I will expand this content once again with even more examples of the various things to be aware of with geometry using the torus geometry constructor. There are of course a lot of other built in constructors with threejs also though and much of what I would write about would also apply to them.