3D Block Generator

Posted in Javascript

Idea:

I wonder if I could generate a three-dimensional grid from pure Javascript?

Steps to Solution:

1. First how would I make a single 3D cube to display? 

- I did this by using 6 div elements and using CSS3 transformations to make each face of a cube.

.cube{
    width: 2em;
    margin: .5em auto;
    transform-style: preserve-3d;
    background: rgba(156, 2, 2, .7);
}
.side{
    position: absolute;
    width: 2em;
    height: 2em;
    background: inherit;
    border: 1px solid rgba(38, 38, 38, 0.5);
    color: white;
    text-align: center;
    line-height: 2em;
}
.front { transform: translateZ(1em);}
.top { transform: rotateX(90deg) translateZ(1em);}
.right { transform: rotateY(90deg) translateZ(1em);}
.left { transform: rotateY(-90deg) translateZ(1em);}
.bottom { transform: rotateX(-90deg) translateZ(1em);}
.back { transform: rotateY(-180deg) translateZ(1em);}

2. How do I orient the cubes in a 3D grid & how do I decide which blocks in the final grid are "plotted"?

- I found the easiest thing to do was to manually create a Two-dimensional array and simply loog through the entire array to find out whether each point in the grid should be plotted with a cube.

Layers: 
[ 
 [ 
    [0,0,1,0,0], 
    [0,0,0,0,0], 
    [0,0,0,0,0], 
    [0,0,0,0,0], 
    [0,0,0,0,0] 
  ], 
  ... 
]

 This would represent the first layer of the grid. So essentially you would need to loop through until a "1" is hit. Once a #1 is hit the program will say create a cube on the 3rd block in the first row.

Simple function with an intresting result!

 

CodePen    Github


← back to the blog