![]() ![]() 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. 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. 1.1 - Shape Constructor Basic example using the shape geometry Again for this section at least i will not be doing anything fancy with materials, textures, and so forth. After that I can use the resulting geometry with the usual mesh object, and also choose a material with such mesh objects. 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. ![]() 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. When it comes to the paths for now I will be sticking to just using the move to, and line to methods. 1 - The Basics of getting started with THREE.Shapeįor this first section I will be going over a few very basic hello world style examples of the THREE.Shape class. When I first wrote this post I was using threejs revision 127, which was a late version of threejs in early 2021. I have got into the habit of mentioning this is every post I write on threejs these days, so here it goes once again. This is also where I park the source code examples for my many other blog posts on threejs as well. The Source code that I am writing about here can also be found on Github in my test threejs repository. 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. 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. 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. 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. 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. 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. 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. When it comes to knowing how to create shapes you will want to also look into the paths class. Still in this section I will go over at least a few key details about some things that you might want to read up on more when getting into the shape constructor. ![]() So if you are still fairly new to threejs you might want to start out with a getting started type post on threejs. I will not be getting into the very basics of threejs, and client side javaScript in general here. This is a post on the THREE.Shape class in the javaScript library known as threejs, so it should go without saying that you should have at least some basic working knowledge of threejs in order to gain something of value from reading this post. The Shape Constructor and what to know first 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. ![]() 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. 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. Today I thought I would look into making a few quick examples of the Shape constructor in threejs. ![]()
0 Comments
Leave a Reply. |