threejs cube stack grid example
Last week I made a cube stack threejs example that was based off of an older example that I made for an old post for the orthographic camera. I made a whole lot of improvements to that dusty old example for that post, and now for today’s threejs example I thought it would be cool to start another project example that is a grid of these cube stack objects actually. So then this is another one of my threejs project examples where I am continuing to work off of one more more previous threejs examples to make an event larger over all project.
This cube stack module and what to know first
I have other threejs project examples that Might prove to be better examples for this sort of thing
Shortly after I first wrote this post I starting another threejs project that is the same general idea of what I started here, only the goal was to have a grid that can be used with objects in general. I called this project object grid wrap because I am bad at names and as such name things in a way in which I describe what they are. The project is a way to create a grid of objects, from a collection of source objects. Then the offset values can be changed and when doing so the location of the objects wrap around in two directions.
The source code in this post is up on github
The source code for this post can be found in my test threejs repo on Github.
Version Numbers matter
When I first started this post I was using r135 of threejs, and the last time I came around to do some editing I was using r146.
1 - The first state of the cube stack grid module
This is an example that is a continuation of what I worked out in a previsions threejs example, and when it comes to the source code of that example I did not change much of anything. I will include that here in this section but it will just be more of the same when it comes to what I all ready wrote about in that post.
1.a - The cube stack grid module
The general idea here is that I call the create method of this module and when doing so I pass some options for the create method. There are of course options for setting the width and height of the cube stack grid, but there are also options for setting what the width and height should be for each cube stack object also. There is then the question of how I go about setting what the options should be for each cube stack in the gird, for this I have something that is like a color palette, only it is for cube stack options rather than colors. I can then pass or generate and array of index values for this pallet of cube stack options then.
1.b - The cube stack module ( Using r1 from threejs-examples-cube-stack )
This is the source code for the other threejs example that I did before this to which I am using for each cell in the grid of cube stack objects here. I did not change much of anything with this when making this example I am just parking it here again just for the hell of it then.
1.c - The data textures module
So then I am going to want to call that create method of the cube stack grid module, but first I will want to create some values for what I want to see when it comes to options for a cube stack instance. Then for this example I am just making an array of number literals for the indices of each object in this pallet of cube stack options as I have come to call it. Now that I have that out of the way I can create my instance of the cube stack grid.
So far I have all the basic features in place that I wanted with this threejs example when it comes to having control over what the size of each cube stack should be and the width and height of the grid of cube stacks. The long term plan with this was to just have a system for creating some kind of interesting looking visual thing, and to at least some extent I think I all ready have that. The next step would be to just add a few more features when it comes to effects, and batter control over how to go about generating textures to be used for one or more of the cubes in each stack.