I want to start thinking in terms of what the long term plan with threejs might be for me if I am going to continue writing new posts on it. Also I what to known what to do when it comes to starting some kind of actual project using threejs rather than the simple tech demos that I write about for the most part when writing these posts on threejs. However I think what I really need to start doing is making a few examples that are some kind of starting point for an actual project of some kind. With that said I think In this post I will be writing about my first, basic guy, or person model using three.js that I made a while back, and then updated just a little for the sake of this post.
I actually have a number of crude modules that are really just a collection of mesh objects using the built in three.js geometries, rather than a professionally made model that is imported from something like blender. When it comes to doing that there is getting into how to go about loading exported dae files, or some other kind of file format. I have nothing against making those kinds of modules, it is just that those kinds of modules can prove to be time consuming to make, and they do not always result in an over all better finished product in the end actually. Also I am taking into account what I want to really make with three.js and I am thinking more so in terms of animations in the form of videos, rather than games.
So when it comes to making videos all that matters in the end is if the final product looks the way I want it to when it comes to the final video and that is it. Also it is not just how a video looks that is important really but the over all subject matter, and so may other things that go beyond the scope of this blog post. Crude modules might look crude, but if I am going for that kind of style to begin with, then they will work just fine and I can move on to other aspects of making that kind of content. What really matters most then is the over all finished product in terms of everything, not just the animation, and I am finding content on youtube that I would say are examples of doing this kind of thing right.
So when it comes to the kinds of over all scenes that I would like to make, I will want to have at least one, if not a few basic guy, or person type models. With that said this post is on one of my first modules for this sort of thing. This kind of module, and several other variations of it, has all ready appears in some of my other examples. However in this post I think I will be just writing about the guy model by itself, and a single demo of the model.
This is something that I have found that I just need to repeat over and over again in every three.js post. When I first made this model I was using three.js version r91. Sense then I made some changes to get this to work find with version r127, which had to do with changes with how to do about using more than one material with a mesh object. Also the last time I cam around to do some editing I had to make some changes to the demos to get this working without error to get them working okay for r146.
The source code examples that I am writing about here can be found on Github at my test threejs repository. Also I am writing about something that I started in another project that I just called threejs guy that is also up on Gthub.
This is a section on the first revision of the guy.js module that I started a long time ago now. I might add one or two more demos makijg use of this, and in time might also make changes to the code actaully. However at this point any chnages will just to be to make it work with newer verions of threejs and that is it.
Here I have the source code of my first basic guy model. When I made this I was thinking in terms of having a base class that I might built on top of when it comes to making additional variants of this kind of thing for better or worse. When it comes to actually using this though I have made other modules that are just like this only they take a more functional approach. However what I really care about is to just have a very crude basic guy, or person type module that I can just skin with some textures by hacking over the materials that are being used a little. With that said this is more or less what I hand in mind when it comes to having something to that effect.
So then the whole idea is to just have a way to create an instance of one of these, and then just use the prototype methods to work with the model in a project. With that said maybe I should take the moment to go over just one little demo that makes use of this for what it is worth.
Now to test out this guy model to see if things work out okay so far, and it would seem that they do. For this first getting started type example I am just creating a static scene in which I create a single guy object and then use the built in methods to chnage the state of the arms.
Here I am creating not one, not two, but three instances of this guy model. For each guy model I am doing something a little different, where one is just shaking there head, another is moving there arms up and down, and another is being really animated in a few ways. So then this seems to work okay at least for making little video projects that might involve a few of these, or maybe even a lot of them actually.
What I worked out here when it comes to the guy model that is fairly animated might prove to be a good starting point for another helper method for setting position of one of these. However there is a bit more than just that of course so I think at least a few more demos are called for when it comes to setting position and rotation of something like this.
So now I think what I need to do is make some examples that are not just about a single model like this, but a number of models like this. I will want to have one or more of these kinds of models in a scene, along with some additional models that are other objects to place in the scene. Then there is just working out what the over all project is from that point forward when it comes to the animation, and things that are outside of animation all together like having a script, or a storyboard, but maybe getting into that kind of thing is a matter for a whole other post.
For now I just want to have a very basic, crude, guy model, and with that said I think I have something. Maybe when I start to use this I will want to add at least a few more methods, mesh objects, and so forth, but I think I want to keep this very basic and crude. For wherever the reason I seem to like that kind of style actually.
In future revisions of this guy one module that I may or may not get to at some point I am sure that I will want to have better methods for helping me with the process of positioning one of these little guys to the surface of something. I am thinking that when I use this module it will be for some very simple crude scenes where I will just have everything positioned on top of a plane geometry for now maybe. So for this demo I made a simple helper function that I can call to just set the y value of the Vector3 class instance stored at the position property of the main group object.
Here I now have another helper for setting the position of the guy, but this time I am using the box3 class to do so which might prove to be a better way to go about doing this sort of thing. I also worked out a helper function for setting the rotation of the guy model as well where I have some things worked out that might be just what I want to happen when using this in a project when it comes to rotation.
By default I will want for the y value of the Vector3 that I given to use for the look at value to be ignored and use the y position of the main group object for the y value. This will allow me to have the guy model face a given direction but only with respect to the x and z values of the given Vector3 object. I can disable this of course and then use the y value, but do so in a way in which things are adjusted to it looks right.
Here I now have a new animation loop example involving curves in which I am testing out everything that I have made thus far when it comes to the guy module as well as the additional helper functions that I have made. I have a whole bunch of these guys actually and I am having them all move along a curve path.
Another little demo project that I wanted to work out using the first r0 revision of the guy module thus far is a little additional code that I can use to create a kind of explosion effect. That is to have a cool effect where the guy will just break apart into a whole bunch of triangles and then have those triangles move around all over the place. So for this demo I made an update guy effect helper function that will update the state of a guy object based on a given effect function and alpha values. With that thus far I have made a single effect function thus far that is not really what I had in mid with this, but it is a good start at least for something that I might build into future revisions or maybe make into some additional module project.
I am happy with this basic kind of guy module, and moving forward with it from here might just involve adding a few more features when it comes to how I go about using in an other projects. I might want to make a slightly more advanced version of this kind of guy model, but once I have a few models like this it gets to the point where all I have to do is just skin them in different ways and that is about it.
I am all ready using this guy model, and many variations of this in other projects, and examples. I have a few in the works actually, but so far one that I am most happy with thus far is my guy stuck on hamster wheel example. I am sure that I will be making at least a few other examples here and there that make use of this, or other modules that are based on it, and as I do I will try to come back here and edit this post when I do so.