Shapes in threejs as well as extrude geometry
Today I thought I would look into making a few quick examples of the Shape constructor in threejs. This Shape Constructor is a way to go about creating a 2d shape which can then in turn be used with THREE.ShapeGeometry, or THREE.ExtrudeGeometry to create a buffer geometry. This geometry can then be used in a mesh object, or with anything else that needs a geometry such as with THREE.Points or THREE.LineSegmenets. The shape geometry constructor might come in handy as a way to quickly and easily go about making some custom geometries that are just 2d geometries that can then be brought into a threejs project as a custom cut surface, or a solid object that is extended with a little depth.
The Shape Constructor and what to know first
Also look into the path class
When it comes to knowing how to create shapes you will want to also look into the paths class. This paths class is what will contains methods like move to and line to that can be used to create the paths that are needed to make a shape object. This is what I will want to use if I am in a situation in which I need to create a 2d path withjajavScript code rather than an external file. When it comes to using an external file I will want to go with SVG and with that the SVG loader in which case I do not have to bother working with the path class directly.
Also Check out the SVG Loader
The SVG loader is an additional loader that can be added on top of the threejs library alone to load SVG files and thus use the path data of those kinds of files to create Shapes. This is actually the main way that I often like to end up with both paths as well as shape objects that I can then use to create shape and extrude geometry. Often I am in a situation in which I all ready have an SVG file that I would like to use to create a 3d form of a logo. Also SVG is a great standard for making a common plane old 2d form of something while also being able to use it with shape and extrude geometry constructors by importing it into threejs by using this loader.
Source code is on Github
The Source code that I am writing about here can also be found on Github in my test threejs repository. This is also where I park the source code examples for my many other blog posts on threejs as well.
Version Numbers matter with threejs
I have got into the habit of mentioning this is every post I write on threejs these days, so here it goes once again. When I first wrote this post I was using threejs revision 127, which was a late version of threejs in early 2021.
1 - The Basics of getting started with THREE.Shape
For this first section I will be going over a few very basic hello world style examples of the THREE.Shape class. When it comes to the paths for now I will be sticking to just using the move to, and line to methods. There are a lot more methods in the path class to work with but I will be getting to those in later sections of this post. Once a Shape object is ready it can be passed as the first argument for two geometry constructor options which are the Shape geometry and extrude geometry constructors. After that I can use the resulting geometry with the usual mesh object, and also choose a material with such mesh objects. Again for this section at least i will not be doing anything fancy with materials, textures, and so forth.
1.1 - Shape Constructor Basic example using the shape geometry
Maybe a good starting point with the Shape constructor would be to use it to create a simple triangle shape, and then use that with the Shape Geometry constructor. So in this example I start out with just calling the THREE.Shape constructor and then saving the returned instance of Shape to a variable. I can then use the Shape move to method to move to a location in the 2d plain, and then call the line to method to create my shape. I can then pass the shape as the first argument to the THREE.ShapeGeomerty constructor which will then return my instance of geometry that I will then want to use with a mesh Object. When I then use the geometry with the Mesh constrictor I might want to set the side property of the material that I use with the Mesh constructor to THREE.DoubleSide so that both dies of the triangle are rendered.
So then this kind of use case of the Shape constructor might work out just fine if I just want to create a flat surface that is of a custom shape and place it into the scene. In other words it is a kind of custom cut alternative to using the plain geometry constructor.
1.2 - Using the Extrude geometry constructor with THREE.Shape
The Shape geometry constructor works great if I want to create something that is just a flat surface, however another option would be to use the Extrude geometry constructor. This will result in the creation of a geometry that is the shape geometry, but just adding a little depth to it. When doing so there are a bunch of options when it comes to things like the depth, and if the edges should be beveled.
There may be a great deal more to cover when it comes to the THREE.ExtrudeGeometry constructor, but maybe that is all something that I should save for another post.
The Path Class
As I have mentioned above it would be a good idea to look into the path class in detail as well. This is subject that might deserve a whole other post and then some maybe, however in this post I think I should still have at least a section on PATH. There are a number of useful methods in the Path class for making a 2d path, in the basic examples I all ready covered the move to and line to methods of the path class, but in this section I will be getting into some more options for making the path that forms the 2d shape.
2.1 - Set from points example
The set from points method of the Path class is how to go about setting the state of a path by way of an array of THREE.vector2 class objects. So then I can create an array of these Vector2 objects by any means that I would like, and then I can just create a shape, and then call the set from points method off of the shape and pass the array of Vector2 objects.
2.2 - Heart shape example and the bezierCurveTo method of the Shape Class
The official example of the Shape class makes use of the bezier curve to method as a way to go about making a heart shape. It would seem that the Sharp class has a number of methods to work with when it comes to creating the lines that will be used to create the shape. There is making use of them, or just working out the math when it comes to just sticking to the move to and line to methods.
3 - Punching a hole in shape with another shape
One thing that comes up when it comes to working with shapes is how to go about punching a hole in a shape with another shape. To do this all I need to do is just create two shapes actually one of which will be the base shape, and the other will be a shape that will represent a hole in the shape. The shape that will be the hole just needs to be added to the holes array that is a property of an instance of Shape.
In this example then I am just creating a triangle type shape again, but then I am creating another shape that will be a hole in the shape. When it comes to this shape I am using the arc method of the path class to create a hole shape that will be a circle. This method works just like the arc method of the 2d canvas drawing context method when it comes to the order of the arguments. In other words the first argument is the x axis position of the center of the arc, the second argument is the y position, then the radius, and the start and end angles of the arc. Once I have my hole shape I just need to punch that shape to the holes array of the shape that I want to punch a hole in and that should be it.
So then If I want to add more than one hole to a shape then the process is just creating the shapes the way that I want them and then just adding more than one shape to the holes array.
4 - Shapes and Groups
I wanted to make at least a quick example of using shapes to create mesh objects along with other mesh objects created with built in geometry constructors such as the box geometry constructor to create a group of mesh objects. I often like to create groups of mesh objects that can come together to resemble some kind of over all object of one kind or another. I often make these kinds of groups just composed of mesh objects that use built in geometry constructors however with the shape geometry constructor this allows me to make some interesting custom objects without getting to in depth with making a truly custom geometry constructor.
So in this example I made an instance of THREE.Group, and then created and added a mesh to that group that uses the THREE.BoxGeometry constructor for the geometry. I then wanted to add another mesh object to that group this time using the THREE.ExtrudeGeometry constructor and of course a Shape. I then rotate and position the mesh object of the Mesh that makes use of the Shape so that it looks like it is just an extension of the mesh that is just a box.
So then all kinds of interesting shapes are possible by just making use of more than one option with the built in geometry to create an over all object composed or a group of mesh objects. For more on this kind of topic it might be a good idea to take a look at my post on grouping mesh objects.
5 - Animation loops Examples
I like to make at least one if not more videos for my blog posts on threejs these days, and when I do so I also like to start out with at least one if not more animation loop examples. This will then be the section will I will be starting out with at least one or more of these kinds of examples that will be used in any videos that might be included in this blog post.
The main thing here is that I would like to not just update the position, rotation, and scale over time with these animations, but also the geometry. I have found that the best way to do so it to mutate the state of a geometry rather than creating new ones over and over again when it comes to this.
5.1 - Heart Shape example
Here I have a current standing animation loop example based off of that heart shape example that I have for the paths section.
The Shape Constructor can prove to be yet another helpful tool in the toolbox of sorts that is threejs. It can be used with the extrude geometry constructor to help create the geometry for all kinds of mesh objects that can be used on there own, or as part of a group actually. For example I can have a mesh that makes use of a box geometry, and then have a extruded triangle shape geometry added to another mesh that can then be positioned next to it.