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.

units in three.js are whatever you want them to be. depends on how you design your app. they can be inches or miles. — gaitat

bjorke bjorke · Accepted Answer · 2015-09-29T17:36:34

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);

Three.js - Arranging cubes in a grid

1 Answers