Weird face one threejs example
This week the main threejs project that I worked on a little was my weird face one example in which I am making a kind of hybrid model between the kind of models that I have made thus far, and a more professional kind of model that I still have not got around to learning how to make just yet that has to do with loading Geometry stored in an external file that I made with blender. That is that so far I have been making informal models in the form of having mesh objects with geometries that are created using the built in geometry constructors, the oldest example of this would be my guy one model.
Although these kinds of informal models that are just groups of mesh objects with built in geometries work okay when it comes to a very crude kind of style, I am thinking that I should make an effort to go in the direction of making a more professional kind of model to at least some extent. This kind of hybrid model that I have in mind involves geometries that are created in a program like blender, and then I use my lerp geometry method to allow for animation of certain features. I am sure that this will not be the last kind of module like this as I learn more about threejs, as well as other topics that have to do with 3d modeling in general. However I have to start somewhere when it comes to getting away from what I have been doing thus far that is just not what I want to do all the time for every project idea this far.
The Weird face one example and what to know first
There are morph attributes of buffer geometry also
This is a threejs project example that I started before I got around to looking into morph attributes of buffer geometry objects. Although I will be observing this feature of buffer geometry with any future revisions of this that may or may not come to pass, this might not be such a good post to read when it comes to really learning a thing or two about animation at this time. The R0 version of lerp geo that I used in R0 of this example which as this writing is still the latest will use the vector3 lerp method to tradition all of the points of a geometry from one position to another. Although this works okay the same can be done with morph attributes, and it is also a great way to make these kinds of transitions not just with a position attribute but all buffer geometry attributes as well.
Check out the dae file loader as a way to load assets that are exported from blender
This is an example in which I am building off of an additional threejs project that has to do with animating geometry
Recently I completed another threejs example project that has to do with creating a method that lerps all of the points of the position attribute of a geometry from one state to another. That is that I create a mesh object with a geometry as well as two or more additional geometries with a similar, or ideally identical count of vertices and then use this lerp method to transition from one position state to another. I have all ready wrote a post on this lerp geometry method so I will not be getting into that in detail at least in this post.
Full source code and additional DAE assets are at github
The full source code as well as the DAE files that I am using for this example can be found in my test threejs github repository. This is also the repo where I park the source code for my many other blog posts on threejs as well. Also when it comes to complex projects such as this, cloning down the repo and getting the sever running might just be the best way to get this up and running on your end as it allows for controls over the versions of all the files that are being used and so forth.
Version numbers matter
When I was first writing this post I was using r140 of threejs along with recent versions of the DAE file loader and orbit controls and everything was working just fine on my end. In addition to this the last time I cam around to do a little editing I was using r146 of threejs and was some to get everything working just file with that version as well. At this time there are a whole lot of major code breaking changes being made up ahead, at some point I might get around to editing this post yet again but if you are having a hard time getting this working on your end the first thing to check is the version number.
1 - The Weird face module, addtional files, and demos R0
In this section I am writing about R0 of the weird face module that I started before I learned a thing or two about morph attributes. The weird face module works on top of R0 of my lerp geo module to which as of this writing there is an R1 of the module that does make use of morph attributes. However also as of the time of this writing I have not made an updated revision of weird face as I still want to refine some things in that supporting module first.
1.a - The weird face module
For the weird face module I have just a few methods that are used to update the state of one of these weird face objects that I load into a project by way of a DAE file loader. When doing so the main root object of the weird face object is the nose object to which the eyes and mouth are children off. So then I have a set mouth method and set eye method that both take the nose object as the first argument along with the additional values that are use to update the state of the weird face object.
When it comes to the mouth I am suing my new lerp geometry method and when calling the method I need to give a m0 argument that is the current state of the geometry, and also a m1 argument that is the geometry that I want to lerp to. When it comes to moving the eyes of the model this is where I am still just changing object3d values of the eyes as a way to change the state of them.
1.b - The lerp geo function
Here is the source code of the lerp geometry function that I worked on in an older threejs project example. It works by passing the geometry that I want to update as the first argument, then I pass a starting and ending geometry state alone with an alpha value between the two that will be 0 to 1 value between the two geometries to set the first geometry that I am updating. I am then using the lerp method of the vector3 class to set the position of each vertex by way of a simple linear lerp between the points, and while I am also at it I update the normal attribute as well by just calling the compute vertex normals method.
1.c - Dae tools module
Another file that I am using for this example is my DAE tools file, this is yet another file on top of the DAE loader itself that is an additional threejs file that can be found in the threejs github repository. This is yet another one of my threejs examples that is a kind of work in progress, I have found that there are often some additional things that I want to do with DAE files beyond that of just loading them but I am not fully sure what that all is at this point so the module is a little thin and is for the most part just some abstractions for using the loader that help be to make sure that I am using it in a way that works well when loading one or more dae files along with any additional texture assets.
1.1 - Basic Demo of werid face module and additional tools
Now I can load the DAE files that I want to use, set up some local variables, along with an animation loops and the usual threejs objects to create a scene. At the bottom of this first demo of the weird face module I am using the create and load all method of my DAE tools module to load two DAE files one of which is the main file, and the additional one contains mouth geometry options. This is just the way that I made the model thus far and in any future revisions of this I might go with some kind of standard where I have all the objects that I want in a single DAE file. There is still a great deal of things that I would like to refine more when it comes to not just this project but any and all kinds of projects like this one.
This has turned out to be a fun project and I like how the end result has turned out when it comes to making a video at least with the code thus far. Also what is real nice about making videos is that I do not have to care so much about the state of the code as long as the frames come out the way that I like them then I have a final product.
Still I am not sure if I can say that this is the way that I will want to make assets for various kinds of models at this time. I do think that for now I want to make assets that are more or less just collections of static geometries for the most part, it is just that for video projects there is the idea of having a collection of geometries for a single object such as a mouth of a face and having a way to transition between them. This then seems to work okay so far, but I am sure I will run into problems when it comes to battle testing this.