Cylinder Geometry threejs example
There are a number of built in geometry constructor functions that there are to work with in threejs such as the box geometry constructor. In this post however I will be writing mainly about the cylinder geometry which apart from being using for making a cylinder, can also be used to form some other shapes actually depending on the arguments given.
With that said one interesting thing about the cylinder geometry constructor is that I can give both a top, and bottom radius when calling the constructor. So I can set a radius of zero for one of these which allows me to use this is a replacement for the cone geometry constructor. There are then a number of other arguments that can be given to define how many sections there will be as ushual for many of these built in geometry options.
Cylinder Geometry and what to know first
Read up more on Buffer Geometry in general
There is also the Cone and Tetrahedron geometry
The cone geometry can also be used to make geometries that are similar to this kind of geometry when used with a certain set of arguments. There is also the tetrahedron geometry that can be used as a way to make a Pyramid like object.
Source code is on Github
The source code examples that I am writing about here can also be found in my test threejs repository on github. This is also where I place the source code examples for my many other blog posts on threejs.
Version numbers matter
When I first wrote this post I was using r140 of threejs, and the last time I came around to do a little editing I was using r146.
1 - A Basic Cylinder geometry example
To start out with I am going to have an example that is just the usual setup with a scene object, camera, and renderer along with just one mesh object. When it comes to the mesh object I will of course be using the Cylinder geometry constrictor and I will not be doing anything fancy with materials and lighting here.
When making a mesh object to add to the scene I first need a geometry and one way to do so would be to call the Cylinder geometry constructor. When doing so the first two arguments are for setting the top and bottom radius values for the cylinder. The third argument is for setting the length of the cylinder, and after that the fourth and firth arguments are for setting what the count should be for radial and height segments. There are additional arguments after that but for now I think I should just stick with these argument for the sake of this basic example.
2 – Making a Cone with Cylinder Geometry
A while back I did write a blog post on the cone geometry constructor as a way to make cone shapes. However it would seem that the cylinder geometry constructor can also be used to make this kind of shape, and thus proves to be a little more flexible when it comes to making various typical shapes for a scene.
When calling the cylinder geometry constructor as covered in the basic example the first two arguments that I give are used to set the top, and bottom radius values. So then to make a cone shape I just need to set a value of zero for one of these first two arguments.
3 - Groups and cylinder geometry
One of many things to be aware of when it comes to geometry in threejs is the groups attribute of a geometry. This is something that comes into play when dealing with an array of materials rather than just one. When doing so the question comes up as to how to get about defining what material will be used where and this is what the groups property of the geometry is for.
I have wrote a post on the material index property of the objects that are used in groups and arrays of materials before hand so I will not be getting into this one in two much detail here. However I think I should make at least one example that quickly shows what the deal is with the default state of groups when calling the constructor.
With that said I can give an array of three materials rather than just one for the materials argument when making the mesh object. When doing so the material at index value 0 will be used for the side of the cylinder, while the other two index values will be used for the top and bottom caps of the cylinder.
4 - Open caps and additional arguments
There are a few more arguments to work with when making a cylinder geometry when calling the constructor function. The one after the radian and height segments counts is a Boolean to set open caps as true or not, the default with this one is false which means that there will be caps for the cylinder. After that the last options have to do with setting a starting radian position and a radian delta from that starting position.
There is the Math utils object that contains useful methods for quickly converting from degree to radians. Also if I am going to have open caps I might want to set the side property value of the material that I am using to a value that will be double side, so that both sides of a face are render rather than just the front side.
5 – Points and Lines
There is also using points and lines in place of the usual mesh object. If I want to use points I just pass the geometry to the points constructor rather than mesh, and when doing so I have to use the points material rather than one of the mesh materials. One option I might want to adjust with the points material would be the size option as often the size of the points are two big when doing this.
Another alternative option to the mesh object would be the lines, or lines segment constructor. When doing this I can just pass the geometry as the first option also, but some times I might want to pass in threw the edges geometry constructor first. In any case just like with the points constructor I can not use any of the mesh materials and then have to use one of the special line materials in place of doing so.
That will be it for now at least when it comes to the cylinder geometry constructor in threejs. Every now and then I do come around to do a little editing so I am sure I will expand this post at some point in the future when doing so.
However there might only be so much more to write about when it comes to the cone geometry constructor alone rather than topics that apply to geometry in general.