So this post will be on what I have together at this time for what I am calling an object grid wrap module which will be yet another one of my threejs project examples.
The threejs object grid wrap module and what you should know first
Read up on the subject of shallow and deep cloning of objects
In this object grid module I am taking an array of source objects and then creating new objects based off of those source objects. When doing so there is calling the clone method of the object that I want to make a copy of, but this will just create a copy of a mesh object or group objects itself and not with any nested object such as with a material or geometry that is used. This is one of the reasons why I have added an option that allows for me to pass a custom method for cloning objects, I have what I have made for this when it comes to a built in method for cloning, but I am sure there will be situations in which I might want to use a custom method for this sort of thing.
I have wrote a number of posts in the past about this subject when it comes to my posts on the lodash clone, and lodash clone deep methods.
Wrapping, clamping, and Euclidean Modulo
Version numbers matter
When I first made the source code examples that I am writing about in this post I was working on top of r135 of threejs.
Source code is also up on Github
On Github I have my test threejs repository where I have the source code that I am writing about here as well as the source code for many other such simple project examples.
1 - First version ( r0 ) of this object grid warp module and a demo of it thus far
In this section I will be going over the first revision of the object grid wrap module itself as well as demo code that helps to show that this will work they way I want it to. For this first revision I all ready have all of the core ideas that I wanted up and running and there may or may not be a need for an additional revision. I can create an instance of a THREE.Group using the create method of the object grid module that has children added and positioned from the array of source objects and index values that I give. The other core idea that I wanted also seems to be working well when it comes to moving these objects around and having them loop back.
1.1 - The object grid wrap module
Here I have the source code for the module that I had in mind that creates and returns a public API with a few useful methods. There is the create method that I can call to create and return a new grid object, as well as additional methods to change and update this grid object. On top of the public methods I have a number of private helper functions for this like getting the true tile home position of an object, as well as other kinds of positions such as positions that are created with alpha values from these given home locations. Also I have a number of hard coded defaults for the various options for the create method so I have something of interest at least when I just call the create method by itself.
1.2 - Demo of the module
Now I am just going to want to have a little demo code then just to take this module for a text drive of sorts. For this demo I made custom arrays for the source objects as well as using the Math utils seeded random method as a way to generate index values when it comes to cloning what source objects for which tile location in the grid.
2 - Plug in system, arrays of materials, and many little things fixed in r2 thus far
Sense I first wrote this post I have made two revisions of the state of the source code of this object grid wrap module and I am sure that there will be at least a few more as I seem to be using this module now and then in my many various threejs blog posts videos to have a looping grid of objects that composes some kind of interesting scene.
Anyway the main feature of interest thus far here sense the first version is that I have added a plug in system for a way to go about adding various effects that I want to use with an object grid such as an opacity effect. When it comes to the core set of files that I have for r2, thus far I just have one plug in that is a core set of effects. When it comes to built in effects thus far there are none actually as I am thinking that making effects are something that I might want to do as a project to project type thing when using this. That is not to say there there will end up being a few usual methods that I will want to take with me to each new project it is just that I have found that thus far I might want to even park those in an optional external file for now at least.
2.1 - r2 of the object grid wrap module
Now for the state of the source code of the main object grid wrap module in which I have made a number of changes. The major changes are that I have removed the built in effects thus far and parked them in an external file. I can then load this external file with the load method of the module. Other additional changes are some more options for the create method that allow for changing the size of each tile, but for the most part it is the plug in system that is the big deal here.
2.2 - Core effects plug in
Now that I have a plug in system for effects here I have the source code of the first effects plug in that I can use to load what was the built in effects of the first version. For now the state of the plug in object contains just one public key that is EFFECTS which in turn is an object of effect functions that I want to add to the object grid wrap module. I did things this way as I am thinking forward for the sake of additional future revisions in which I might want to load additional things beyond just that of effects for the object grid wrap module such as clone functions, and any other stuff that might end up being added along the way.
I can not say that I am happy with the opacity effect here, which is one of the major reasons what I want to start doing this as I am sure that I will want to make at least one if not more additional opacity effects to say the least.
2.3 - Demo of r2 of object grid wrap
For the sake of this post I made a demo of r2 of object grid wrap that makes use of some of the effects functions of the core effects plug in. All seems to work well with this revision of the module thus far, in order to gain a better sense of what needs to change with any and all future revisions I will of course need to just keep making more projects with this.
So far so good with this object grid wrap module, I have a basic idea of what I wanted in mind and that basic idea is now up and running. At this point I might want to make yet another revision at some point, but in order to really be sure of what is needed in terms of new features and what needs to be fixed I will want to make at least a few if not more projects that make use of this module.
I have a bad habit of making some projects far more complex than they need to be, and the general idea with this is working so I want to maybe slow down a little and focus more so on making additional examples with this module.
With that said as of this latest edit of this post I have made one new additional example in which I am working on top of this object grid wrap module. If you would like to check this out it is my object grid wrap land module example post.