Exploring and Interacting - Game Development with Three.js - page 43

We'll also break up the main.js file into a few different files when we start
writing classes. For simplicity we've put everything in the same folder. In Chapter 5 ,
Design and Development , we take a closer look at better organizational structures for
large projects.
Designing a map
Now that we have a place to put some code, we need an interesting world to look at.
Let's design a map to use. For example:
var map = "XXXXXXX \n" +
"X X \n" +
"X S X \n" +
"X X \n" +
"X S XXX\n" +
"XXX X\n" +
" XX S X\n" +
" X X\n" +
" XXXXXX";
map = map.split("\n");
var HORIZONTAL_UNIT = 100,
VERTICAL_UNIT = 100,
ZSIZE = map.length * HORIZONTAL_UNIT,
XSIZE = map[0].length * HORIZONTAL_UNIT;
Our map is represented as a string where X indicates a wall and S indicates a location
where players can spawn into the world. We split the string into an array for easier
access, then decide how big each voxel should be (in this case, 100 * 100 * 100 as
indicated by the HORIZONTAL_UNIT and VERTICAL_UNIT variables) and track how big
the map is overall using XSIZE and ZSIZE .
Next, we need to use our map to generate the 3D world:
for (var i = 0, rows = map.length; i < rows; i++) {
for (var j = 0, cols = map[i].length; j < cols; j++) {
addVoxel(map[i].charAt(j), i, j);
}
}
This is pretty straightforward—iterating over the map and adding something into
the world at the specified row and column. Our addVoxel method looks similar to
the following code:
function addVoxel(type, row, col) {
var z = (row+1) * HORIZONTAL_UNIT - ZSIZE * 0.5,