THREEJS Looping land animation using the Object grid wrap module
When it comes to using this object grid wrap module I need to define a collection of source objects to clone for each grid location, so for this threejs example I am just creating a module that in part creates this collection of objects that include mesh objects with built in box geometry as well as Extrude geometry using shapes.
The land object grid wrap module and what to know first
Check out Shape and Extrude geometry if you have not done so
In this example I am using the threejs Shape constructor to create an instance of a 2d shape with the built in threejs shape class. I can then use one of these shape classes to create an instance of Extrude geometry that is just a 2d shape with a little depth added to it. For this project example this is what I am using to create mesh objects that will be slopes in the object grid that will resemble land. However this is of course something that you might want to read up more on in detail and with that said I wrote a blog post on this subject of shapes and Extrude geometry in threejs.
The source code, as well as additional assets is on Github
The source code that I am writing about here can also be found in my test threejs repository. There is also the for post folder for my object grid wrap module that I am working on top of that can also be found in that repository. In addition as of r3 of the land grid module I am also using a DAE file as a way to park custom geometry that I would like to use with this project, this asset can also be found in the test threejs repo as well.
Version Numbers matter
When I wrote this post I was testing out the source code here with r140 of threejs and everything was working okay on my end with that revision of threejs.
To help with the process of creating the collection of source objects for the grid I have a few helper functions that I can use to quickly create the desired objects that will be coned for each grid location. So I have a make cube helper, and another helper function that will create each of the slope objects that I can work with when it comes to creating a land grid.
Now that I have my usual collection of threejs objects, and some helper functions for creating mesh objects, I can now create my grid object using the object grid wrap module. To do so I call the create method of the object grid wrap module, and pass an object containing all the options to use when setting up the grid. For the source objects I am of course calling the helper functions with the desired arguments for each object index. For now when it comes to creating the array of index values for each grid location I am just working out a array literal of primitives. On top of the source object index values I will also want to have an array of values that are the altitude values for each mesh object also, for this I am also working this out manually and just having arrays of primitives for these values as well.
When it comes to setting up some effects to use for this grid I am using opacity2 which is a new alternative to the original opacity effect that I made for the object grid wrap module that I made for this project. I will be getting into this in detail later in this section, but the basic idea is to have it so that opacity does not start to go down right away, but after a certain distance from the center of the grid.
1.2 - The new opacity effect plug in
For this project example I made a new opacity effect plug in for r2 of my object grid wrap module that seems to be working great so far and as such I might make this part of a collection of standard effects for future revisions of the module. With my first opacity effect objects will begin to loose opacity from the very center of the grid, which more often than not is not what I want to happen when adding an opacity effect to projects that make use of the object grid wrap module. So then in this new opacity effect I am still doing more or less the same thing as with the first opacity effect it is just that now I have a way to set a value between 0 and 1 that will be the minimum remaining distance from center where opacity loss will start.
2 - Stand alone object grid wrap land module ( r2 )
At the time of this writing I all ready complicated two revisions of this land module that works on top of my object grid module, so in this section I will be writing about what I have done thus far with r2 of the land module. So then I will also be covering all of the features that I started in r1 of the module as well in this section.
The main thing that needs to get done after creating the grid then is to adjust the geometry of each tile in the gird so that each land tile grid mesh geometry is set at a desired altitude. This is done by looping over each tile in the grid and using the clone method of the buffer geometry class to clone a copy of the geometry for the mesh, and then using the translate method of the geometry to set the proper altitude that is set by way of an additional option that is given when calling the create method.
2.1 - The new main.js file
3 - Using a DAE file for land tiles with several demos (r3)
This is a module that I am sure that I will be using over and over again in various video projects, as such I have made yet another revision of the module. In r3 of the land grid module many of the changes have to do with making use of DAE file that contains the various objects with geometries that are used for the land tiles. At this point though I can still use the module built in functions to create the mesh objects as well on top of this feature. Many various improvements have been made while working on this, but the over all state of the code is till a little messy. So I will likely want to make a few more revisions after this still until I have something fairly solid. Still the main idea of what I wanted to get done with this revision seems to be working well and I can use a DAE file as a way to park many objects to use for the land tiles, on top of this I ma also using the DAE file as a place to park additional objects that I would like to use a child objects of land tile objects in the gird as well.
3.0 - The land module ( r3 )
One major change is the introduction of many public methods that have to do with the process of loading a DAE file, or processing the result object in the event that a DAE file has all ready been loaded before hand. So then there is a load method which is what I can use to just load and process the dae file I want to use, but then also the create source object method that will create a source object from a result that has all ready been loaded before hand which is the case when I make my videos.
Many of the changes that I added here should be added to my DAE tools project, at which point a lot of what i have here will be removed as I will be using the methods in that module. Also I think I will be loosing the methods that are used to create built in geometry as well, but that will all be a matter for future revisions of the land grid module.
3.1 - Basic demo of the module using DAE objects
Here then I have basic example of this new land grid module where I am using the new load method as a way to obtain a state object. This state object contains the raw result object that is obtained when using the DAE file loader. However it also has some additional objects that have gone threw some processing that are in a format that I can work with better. This state object also includes an object that I can directly use to update the source objects property of a grid options object that I can then use for my create method of the land object module. I can then create and update my grid object that same as before, whoever now I am using objects from the DAE file rather than the built in ones. As such this allows for a whole lot more when it comes to the land tiles as I can create all kinds of differing geometries in blender for the various types of land tiles.
3.2 - Adding child objects from the DAE file also
In the land set one DAE file I also have added a number of objects that are trees that I would like to add as child objects. In this demo I am doing just that by making use of source object that is created in the load method. The end result is then a scene where I have all the land tiles that I would like then also a whole bunch of child objects that are various types of threes. As of this writing I have just three types of threes to choose from, but I am also adjusting the scale and y rotation as a way to have a little more variation with things.
The core idea of what I want seems to be working well so far though, I could just start making more objects to choose from in terms of both land tile options as well as child objects to place in the scene.
3.3 - Using DAE file objects for land tiles, as well as built in geo still
One more demo to test out that the built in functions for creating land tiles still work fine. So for this demo I am creating two grids and adding them to the scene object. One grid is created using the objects that I have added in from a DAE file, and the other is using the objects that are created using the built in functions.
This project is looking good so far even thought I just have a ruff starting point thus far. The state of the source code is not where I would like it to be, but when it comes to the final outcome with how things look I would say I all ready have a done deal with this. Any additional revisions of this project will likely involve better ways of creating the grid that involve passing just one array literal to create the state of the land, as well as maybe ways to generate the state of the grid also. Another thing that comes to mind is just having a wider collection of source objects that are used to create the state of the grid as well.