There is a whole lot that one should be aware of before hand with this as this is a threejs project example post, and not a getting started type post on threejs. So I assume that you know at least a thing or two about the basics of getting started with a threejs project, and also have at least some background with client side web devlopemen in general. if not sorry getting into all of that is outside the scope of this post. I will however as always write about a few things in this opening section and link to other resources as needed.
The source code examples that I am writing about in this post do not just run on top of threejs, but also the SVG loader as well. The SVG loader is not baked into the core of the threejs librray itself but must be added along with the librray. This SVG loader can be found in the examples folder of the threejs reposatory and as such it is important to make sure that you are using the state of the SVG loader that coresponds to the revision number of threejs that you are using.
A long time ago I started a post on the subject of making SVG files. However I would say that the best resource with this on line would be to just start studying the Modzilla Docs on SVG. When it comes to the Modilla docs I would say that a key element of interset, after the SVG element iself of course, would be the path element. The path element can be used to define just about any kind of 2d path using plain old point to point lines as well as some options when it comes to bezier curves with both one and two control points.
The source code examples that I am writing about in this post can also be found up on my test threejs reposatory on Github. This is where you might find revisions of the modules that are a little more up to date as often I might do a little work on a project like this, but maybe not get around to editing the post just yet. Also this is where I park the source code examples for my many other posts on threejs projects, as well as various features of the librray istelf.
When I first wrote this post I was using r146 of the threejs and thus I am following the r146 style rules that I set for myself. Also at this time I think that I should start making it clear in these sections that I am using the old IIFE pattern for modules over that of JSM for now.
For this section I am writing about the state of the very first version of the SVG tools module, and with that the set of demos that I have togetaher that make use of this module. For the first version of the module I just wanted to have a load method as I will always be loading an external SVG file rather than parsing SVG text, that is somehting that I may or may not get to with a future revision of the module. Anway when calling the load method there is also a major core feature that I wanted to add which is to pass an option that is a processor funciton. This processor funciton is just simply the logic that should be called for each svg file that is loaded.
As of R0 I just have an IIFE form of this module and that is it as I am putting off getting into JSM for the moment. There is just one public method that is a load method that makes use of the SVG loader as well as a custom loading manager that allows me to load more than one SVG file, and also have a funcion that returns a promise when all SVG files are loaded.
For this first demo I just wanted to make sure that things work okat with just one SVG file, and also that things looks okay with the dwefault hard coded options.
When it comes to using this in pne project from the next there is no question that I am going to want to write custom processors. For the mosyt part the built in default processor just serves as an example of how to get strated with one of these. In future revisions of this module there will likley be maybe more that one starting point for built in processors but again they will just be slighlty differed starting points for making a custom processor when and where needed which will likley be often.
So far the SVG tools module seems to be working okay just fine however I would say that there is a whole lot of work to be done when it comes to what is on the todo lost for future revisions. For one thing there is having a custom UV generator for the SVG tools module which just like that of the processror is yet another thing where there would be a built in one, but also will likley just serve as a getting started example of that sprt of thing as well.
I would also like to expand on the collection of methods when it comes to the api to work with when writing processor funcitons. I might need to go as far as having a class for this, but in any case I can see that there are a few more things that I am going to want to bake into that.