# 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!

← back to the blog