threejs cube stack example
A long time ago now I made a cube stack module that I used in my post on the orographic camera. As of late I was doing some editing and while doing so fixed up the source code a little for that post, but now I am thinking that this cube stack model should be the main event for one of my threejs example posts. So I copied over the current state if the cube stack module into a new folder, and started making some changes to it just for the sake of having a little fun, and to lay down a ground work for even more features with this.
The cube stack module threejs example, and what to know first
The source code in this post and many others is no Github
The soucre code examples in this post and many others is up on Github.
version Numbers matter
I was using r135 when I first started writing this post and the source code examples. I do come around to edit my threejs content now and then, and the last time I did so I was using r146. Things where working fine on my end with these revisions of threejs, but the code may very well break with new revisions if i do not come around to making needed changes in the future.
1 - First state of this cube Stack threejs example ( r0 )
In this section I will be going over the cube stack example as it was when I first wrote this blog post. Over time I will likely come around to doing a little editing of this post, and when doing so I also often make some changes to the state of the source code of the example as well.
When I first started this project I just wanted to make a few changes to what I all ready had when it comes to the example for my blog post on the orthographic camera. I wanted to make any needed changes when it comes to things like arguments for the create method of the module, but I also wanted to start an object that will contain effects that can be used to change the state of the cube stacks.
1.a - The data textures module ( r0 )
1.b - The cube stack module ( r0 )
Now for the source code for the cube stack module which at this time has two public methods of interest, one of which is the crate method, and the other is the apply effect method. The create method as the name suggests is what I will be calling in the code that makes use of this module to create a single instance of this cube stack object. There is then making use of what is now just one, but in time might prove to be a full effects that are built into the module itself. In future revisions of this example I might also allow for a way to create external plug ins as a way to extend the effects object, but for now I just have one such effect in the effects object that scales the group that contains all the cubes rather that each cube.
I then have a number of private helper functions for creating the plane on which the cubes will be stacked, as well as for appending cubes to the cube group of the main group object.
For this demo I made just a single instance of the cube stack object with custom values for the grid size, box count, and I am also defining some custom values when it comes to setting the colors to use for the seeded random method of my data texture module.
In the update loop I am then applying the effect that I have thus far, and I am also rotating the whole main group object around on the y axis.
Thus far this module seems to be working great when it comes to just having a way to create a kind of object that is Just a collection of nested objects that I can then change and mutate in all kinds of different ways. I all ready have a lot of ideas when it comes to additional changes for future revisions of this cube stack module, but the core idea of what I want with this seems to all ready be working well.
What is the next step with this cube stack example is the question now at this point. I have been making a number of videos for each of my blog posts that I have wrote thus far, this post is one such post that I have made for that can be viewed at the top of this content here. I am thinking that I might want to make at least one more threejs example that is a kind of grid where each tile location in the gird is a single instance of this cube stack object. There is then working out much more in terms of effects that can be applied for all instances of this kind of object as well as on an instance by instance bases. The main goal I have in mind here is to start a new series of videos where I am creating videos first and foremost and then maybe writing one or two blog posts about them rather than the other way around.