Three.js - Arranging cubes in a grid

Question

I would like to position cubes in a rectangular/square like grid. I'm having trouble trying to create some methodology in depending on what I pick through an HTML form input (checkboxes) to have it arrange left to right and up to down, a series of cubes, in a prearranged grid all on the same plane.

What measurement units is three.js in? Right now, I'm setting up my shapes using the built-in geometries, for instance.

var planeGeometry = new THREE.PlaneGeometry(4, 1, 1, 1);

The 4 and 1; I'm unsure what that measures up to in pixels, although I do see it rendered. I'm resorting to eyeballing it (guess and checking) every time so that it looks acceptable.

Answer 1

Without a fair bit of extra math THREE is not measured in pixels.

To make a simple grid (I leave optimizations, colors, etc for future refinements) try something like:

var hCount = from_my_web_form('horiz'),
    vCount = from_my_web_form('vert'),
    size = 1,
    spacing = 1.3;
var grid = new THREE.Object3d(); // just to hold them all together
for (var h=0; h<hCount; h+=1) {
    for (var v=0; v<vCount; v+=1) {
        var box = new THREE.Mesh(new THREE.BoxGeometry(size,size,size),
                      new THREE.MeshBasicMaterial());
        box.position.x = (h-hCount/2) * spacing;
        box.position.y = (v-vCount/2) * spacing;
        grid.add(box);
    }
}
scene.add(grid);