Weird Walk One threejs example
This post on threejs will be on a threejs project example that is a simple idea for a weird walk animation module. This is just one of several ideas that have come to me that might prove to be a quick fun project for a weird little walking guy model that is composed of a few mesh objects that come together to from a group of objects. This is not the first project idea like this, one of the oldest examples of this kind of model is my guy one threejs example that I made a few years back, and I have many others actually at this point.
The walk cycle that I had in mind is just having two mesh objects for legs, and using the scale property of the object3d class to set the scale of just the height of the mesh objects from its full scale to zero and back again. So it would be a weird walk cycle where the legs just move directly up and down which would not at all look natural of course, but that is the intention to begin with actually.
Weird walk guy threejs example and what to know first
Read more about the Object3d class
There is reading more about the object3d class in general as having a solid understanding of what there is to work with is needed in order to make this kind of project. The object3d class is a base class for Groups, Mesh Objects, Cameras and any kind of object that would be added to a scene object as a child. Speaking of scene objects the object3d class is also a base class of whole scene objects as well. Anyway major features of the object3d class include the position and rotation properties of the objects 3d class that are use to set the local position and rotation of objects. It is mainly this kind of feature that I am using to make crude models of objects.
There is also using blender and loading DAE files as a way to make models
I have come to like making models like this, but there is the more professional way of doing this kind of thing. That world be to make something in blender and then export it to a format like DAE. This DAE file can then be loaded into a threejs project by making use of the DAE loader.
The source code examples in this post are on Github
The source code examples that I am writing about in this post as well as with many others can be found in my test threejs repository on github. This is also where I park the source code for my many other posts on threejs as well.
Version numbers matter
When I first made this example I was using r135 of threejs, and the last time I came around to do some editing I was using r146. If the code examples here are breaking for you on your end that would be the first thing I would check. The threejs library is still a project that moves very fast in terms of its development and maintenance so code breaking changes happen often.
1 - The weird guy module ( r0 ) and basic demo
The weird guy module ( r0 )
The weird guy module that I made will return a few public methods, the main method of interest when it comes to using this would be the create method. In a threejs project where I make use of this I will call this method as a way to make an instance of this weird guy model. I will then want at least one if not more methods that help with changing the state of this weird guy model one of which can be used to set the walk cycle state of the guy. So for now this will have just these two public methods one to create and another to update the state of the model that is just a walk cycle.
1.1 - Basic demo of the weird guy module
Now to have at least one basic demo of this werid walk module that I have made just for the sake of making sure that I have the basic idea of what I want up and running. For this I create my usual scene object, camera, and renderer like with any other threejs project. On top of that I am also using a light source for this demo as I want to add light on top of the emissive values of the materials I am using to help show depth better.
I just call the create method to create and return a new group object that is the model that I can then add as a child of the scene object. After that is all set and done I can then call the set walk method in the body of my update loop that I am using to update and render the state of the model.
The end result here is then just a very simple walk cycle of my weird little guy model, and thus far this is more or less what I had in mind. When it comes to working on this at least a little more there is only so much more to do then such as what more needs to happen with the arms and face to make it look more interesting. There will then need to be at least a few more demos of this, and while I am at it maybe at least a few revisions of the weird guy model with that as well as I will want to least a few more features beyond just the simple walk cycle.
2 - The weird guy module ( r1 ) Moving the arms, ground mesh, and data textures
I was off to a good start with the first form of this weird guy module, as well as the additional code that I was using to make a short demo of what I made. However I think that I should put at least a little more time into this one before moving on to the next thing. There is just a little more that I would like to see done with this example, and that is to also have moment for the arms, and also a better demo where the weird guy is walking along on a repeating background.
The weird guy module ( r1 ) with set arms method and data textures
So with this new version of the weird guy module I added an additional public method that has to do with setting the rotation values of the arms. Also while I was at it I made it so that the arms are composed of two mesh objects rater than just one.
The one additional thing that I changed that is a good step forward is that I made use of data textures as a way to have some texture for the built in materials that I am using for the weird guy. When it comes to creating the data texture I made use of one of the math utils methods called seeded random that allows for me to make random like textures that will be the same each time I reload the page.
2.1 - The demo with ground mesh and additional code for changing the state of the weird guy
So now it is time to test out this new weird guy module to see how things look. With that said when it comes to the demo for this new weird guy module I made a ground mesh, and I also made it so I am using data textures as a way to add some texture to the ground mesh. In place of using the math utils seeded random method I chose to make a texture that repeats better.
So now I have something that looks pretty cool I have the little guy moving along a plane, or rather I have a plane moving in such a way that it looks like that. In any case what it is that I wanted to have working in terms of the moment of the arms is looking okay, but I still think that I do not have this done just the way that I would like it to be. I might want to have more going on when it comes to update the look on the little guys face, and also have a better set of textures for the over all look of the model.
3 - Revision 2 of the weird guy walk module
In revision 2 of the weird walk one module I removed the built in data textures in favor of leaving the creation of textures to an outside option that might be data textures or some other resource such as canvas textures, or external image assets. I also added an option to pass a custom collection of materials when calling the create option, leaving the built in materials as just a hard coded default option without any texture. Other improvements have to do with an additional update method that will help with the process of transitioning into and out of a walk cycle to a standing state.
3.1 - Another basic example of the module ( r2 )
Yet another basic example just for the sake of making sure things work okay with this new module. I made some slight changes with the set arm method, so for the most part it was just tesing out that this works nice.
3.2 - Can now transition into and out of a walk cycle ( r2 )
The major additional for this revision of the module was an additional update method that I can use in video projects to transition from a standing state into a walking state, and back again. So I made this example where I have a number of states one of which is a walk state, along with transition in and out stats and a rest state. It would seem that this new update method is working just fine then.
3.3 - Can still use textures, just need to create them outside of the module ( r2 )
I remove the built in data textures that I had in older revisions as I have a number of other modules for creating textures that I would rather use in projects to create the textures that I would use with a project like this. So in this example I am still using textures it is just that I have to certain them in my demo code here. In a real final video project that I might make using this project I have a number of projects for creating texture with data textures, canvas textures, or just simply loading external static images that I would use to create the textures.
This is not the first kind of example that I have made that is like this, maybe the oldest example of this sort of thing would be my guy one model that I first made a few years ago now. i have made a lot of other projects that are also like this one, but have not really got into using these to make some kind of final product. That might change moving forward, especially if I do start working on threejs related stuff alone when it comes to what kind of direction I take with this website. I have found myself stuck in a pattern of coming up with ideas just for the sake of having something to write about and that is something that I would like to stop in favor of doing the inversion of that. Making projects that are cool by themselves and then maybe writing about them a little.
When it comes to this specific example though I think the nest step is maybe working out at least a few more demos that make use of the module, and also maybe expand the model a little more. When it comes to the walk cycle I think I have things set and down, but I might want at least one more walk cycle method that I can use to transition from a walk state to a standing state, and maybe a few more methods that have to do with the movement of arms, and also the expression of the face. Aside from that I think I just about have a final done deal with much about what this idea was at least for what that is worth.