For today’s new threejs project example post I started a new project this week in which I am looking into using SVG as a way to create paths that can then be used to define the movement and rotation of objects in a scene. The idea cam to be while working on my blog post for the SVG loader last week where I hit me that SVG is a pretty cool standard for creating paths. There is just one little problem which is that SVG is very much 2d, so to create a kind of 3d path with SVG I will need to think in terms of two paths for each 3d path. One path that I will be using to define motion for x and z, and then another in which I just use the y value for y in the 3d path.
If I can work out a decent enough system for creating 3d paths then they can be used as a way to update the position property of any object3d based object over time. This will mean mesh objects, but also any other kind of object3d based object such as a camera. Speaking of cameras there is also using these 3d paths created from SVG to update the rotation of objects as well by using the array of Vector3 objects for values to pass to the look at method of an object.
The SVG loader is an example of an asset loader that is not built into the core of the library itself, but is rather one of many official options for assets loaders that can be added on top of threejs by downloading the file for the revision number that you are using in the github folder of threejs. I have wrote a blog post on the subject of the SVG loader alone as I have mentioned above last week in which I write about setting this up.
The source code examples as well as the addtional assets and notes that I am using here can be found in my test threejs repo.
The version of threejs that I was using when I first wrote this blog post was r140.
When I start an idea for a project like this often th first step is to create one or more fairly basic examples where I just want to get the core idea up and running first. Once I get the very general idea working then it is often just a process of creating a module form of what I made, add new features, and refine the features that are all ready working. In this section I will then be going over these draft examples of an SVG movement module then.
The first and for most thing that I need to do is get the path data that I want to use to update the position of an object, and even then maybe just the x and z values first. For this first draft example of an svg movement module then I made a main object called SVGMove and added a create mesh, and set to alpha public methods for the module. The create mesh object is then just a way to create a mesh object with arays set to the user data object of the mesh object that are created from the svg data.
So far so good with my first x and z only proof of concept with this, but there are a few things that I will want to change before getting into making an actual module with this. There is of course using another path in the SVG to also get y values rather than just the x and z values and that is what I got up and working in this example. However the other thing that I would like to fix is to make it so that the movement is not so jumpy. So on top of using another path for the y values I also want to have a system where additional vectors are created between the points given from SVG as well.
Looks like the core idea of what I want to work is working okay with my draft examples so after I have them looking good the next step is to create the first version of the SVG movement module. While I am at it I will also want to create a number of demos to make sure that the module is working okay thus far.
This first version is for the most part just a module form of what I all ready got working well in my draft examples above but with some much needed changes made, as well as additional features. In my lerp draft example I laid the groundwork for additional sets of values that can be defined in the SVG by adding what I call a use string value as part of the id of an SVG path element. In this module I made changed to the set to alpha method to make use of a look at use string if it is there to use.
Another major feature change that is very much needed is a general use object public method on top of the create mesh method that I improved from the demos. This way I can just use and object3d based object with a set of paths that I define for the object in the SVG file. I still have a create mesh method as will but now it is far more flexible in terms of choosing the constructor function that I use to create the geometry and I can also pass a geometry rather than create one. In any case the create mesh object still uses the general use object method when it comes to appending values to the user data object.
Another thing that I wanted to add at the last moment was a system for checking for a revision number in the SVG file that should correspond to the revision number of this module. I have a lot of plans for this project when it comes to future work that I might do that will result in the svg path data being treated in a new way. So I can check revision numbers and process the data as it should moving forward.
The general idea that I had in mind with this project is to not just use SVG paths as a way to define the position of an object over time but to also use SVG as a way to set the rotation of an object as well. For this demo I wanted to test drive the new set to alpha method of the module to see that both position and rotation can be set by SVG Paths. So I am using the create method method to create an create a mesh with the cone geometry and the basic material in wire frame mode. After creating the mesh object I also rotate the geometryto make sure that the cone is pointing in the direction that I want it to. For this cone mesh I am using SVG paths that start with a cone1 prefix in the SVG file as this is a collection of paths that I set up that have both position and look at paths.
The end result of this is then working just the way that I expect it to, with the cone moving by way of the position paths and also having the front of the mesh facing values created with the look at paths. This works pretty good then, and what is also great is that I can use my use object method to get this to work with any kind of object including cameras.
Another major change that I made with this module is worked out some better methods for creating the vector arrays that are then parked i the mesh objects user data object. In the draft prototypes I was doing this in a crude create mesh helper function that did not give many options when it comes to changing what the geometry is for the mesh and so forth. Now I have a way better method for creating mesh objects, but I am also doing the core actions that need to be preformed with my new use object method where I just give the SVG data result, an id prefix and then a camera that I want to create the vectors for in its user data object.
Simply put although I can use the create mesh object to quickly create a mesh with one of the built in geometry constructors, or a geometry that I have in the code of a project, I can also just create any object3d based object by any means and pass that to my use object method. So in this example I am once again creating a mesh object with the create mesh object method as before, but I am now also using my use object method with the camera of the demo.
The end result with this now is that both the cone mesh object as well as the camera are moving by way of SVG paths. This is more or less just what it is that I had in mind when it comes to this sort of thing, as I am always thinking in terms of having a better system for controlling the movement and rotation of a camera. I can then create all kinds of paths in SVG that will allow for real fine grain controls of camera movement and I can also use this kind of system for doing so with all kinds of values with cameras if I end up going that far in any and all future revisions of the module.
That will be it for now then when it comes to this SVG Movement library that is a great way to go about moving objects around in a scene over time. Or at least it is for what I would like to use it for when it comes to my video projects to say the least. I am sure that there are other ways of doing this sort of thing that might work in a way that is maybe a bit more appropriate for the kind of situation that this is. I have been meaning to take another look at the Curve class that would be a starting point for some kind of alternative project that is another way of doing the same thing here. Although I am sure that such a system would work well I would have to store the data that I use with it as JSON rather than SVG. You see the plan here is to work out a real nice system where I can create the Paths that I want to use with a kind of simply 2d SVG editor and then use this data to display a 2d view of what the movements are and then also use that same data to update the position of the objects in the 3d scene as well.