Tweening many objects at once threejs example
Not to long ago I made a threejs example about a function that will update the values of one position attribute of a buffer geometry as a lerp between one geometry and another. However what if I am doing just that, but all of a sudden I need to stop, and then start lerping to yet another geometry? In other words a kind of many object tween between more than one state of similar geometries. I wanted to make my own kind of system for this sort of thing then that works by using a function similar to my lerp geometry function, but using it to lerp not just once, but a few times, and create a mean between all of the results. This mean between several lerps of geometries will then be what is used to update the geometry of a single mesh object. In this post I will then be writing about the current state of the source code of what I have together thus far for this system.
The tween many threejs example and what to be aware of first
Read or refresh on the BufferGeometry class.
Check out the DAE file loader
I this module I have a load method and the load method depends on one additional external file beyond that of just threejs. This additional file is the DAE file loader that can be found in the examples folder of the threejs repository on github. It might be a good idea to look into this DAE loader in general more if you have not done so before hand. I tend to like the DAE file format when it comes to loading external assets into a threejs project. However there are also, may other options, including options that are built into threejs itself, such is the case with the buffer geometry loader.
Source code, and other assets are on Github
The source code for the module and demos can be found in the for post folder of my test threejs repo. In addition to this I also have the DAE file that I am using in there as well. The first prototype that I made that lead to this project is also in the demo folder in test threejs.
I also have copies of threejs and the DAE loader there as well. However it might be best to always get there from the official threejs repo which is also on Github.
Version Numbers Matter
I was using r140 of threejs when I first made these source code examples, and wrote this blog post for the first time.
1 - First version of my tween-many module and demos of it
1.0 - The tween-many.js file source code ( r0 )
The current state of the tween many module consists of several public methods along with a number of internal helper functions. The general use case would be to use the create source object method or the load method to one way or another have a collection of source objects from a DAE file of objects to choose from. Then once I have that, use the create mesh method to make a new mesh object with cloned geometry from one of the source objects. I can then use the tween method to update the geometry using two or more options from the DAE file.
1.1 - Basic example of the tween method, as well as other public methods
For a basic example of the tween many module I made an example where I am using the load method to create the source object. Then I am making just one mesh, and updating that between just two options. So then there is not anything really special with this demo compared to just using the lerp geometry method by itself actually. However I do like to at least keep basic examples, well basic, and this also should that I can still do the same thing with the lerp method alone when I just give one set of arguments in the state array when calling the tween method.
Speaking of using the tween method that might be the main item of interest to look at when it comes to this demo. When I call it I give the geometry I want to tween as the first argument, but then I do give a start and end geometry with an alpha value but an array that contains and array of these values. In this basic example it might seem like making the situation more complex than it needs to be, bit when it comes to having more than one array of these arguments then the complexity is justified.
1.2 - tweening many objects at once
Now for at least one example of what this is really about with an example where I am giving more than one array of arguments when it comes to start, and end geometry and an alpha value. With this example I am tweeing between box1 and box2, while also doing so with box1 and box3. On top of that I am also doing a third tween between box1 and box4 as well, all at the same time. The end result of this is a fairly interesting effect.
That will be it for now when it comes to this threejs project example that has to do with the mutation of geometry over time. I am sure that I will want to make at least a few revision of this module, so I will likely be doing a little editing of this post in the future. Also I can see this module being one assets that I use along with many others when it comes to some kind of future threejs examples that is actually a collection of these examples being used together.