Meshes in Code

When a vertex has multiple attributes, we use multiple arrays. Here are the tables for the colored house.

var positions = [
    [ 0.0, 1.0, 0.5 ],
    [ -0.5, 0.5, 0.5 ],
    [ -0.5, 0.0, 0.5 ],
    [ 0.5, 0.0, 0.5 ],
    [ 0.5, 0.5, 0.5 ],
    [ 0.0, 1.0, -0.5 ],
    [ -0.5, 0.5, -0.5 ],
    [ -0.5, 0.0, -0.5 ],
    [ 0.5, 0.0, -0.5 ],
    [ 0.5, 0.5, -0.5 ],
    [ 0.0, 1.0, 0.5 ],
    [ -0.5, 0.5, 0.5 ],
    [ 0.5, 0.5, 0.5 ],
    [ 0.0, 1.0, -0.5 ],
    [ -0.5, 0.5, -0.5 ],
    [ 0.5, 0.5, -0.5 ]
];

var colors = [
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 1.0, 1.0, 0.9 ],
    [ 0.8, 0.0, 0.0 ],
    [ 0.8, 0.0, 0.0 ],
    [ 0.8, 0.0, 0.0 ],
    [ 0.8, 0.0, 0.0 ],
    [ 0.8, 0.0, 0.0 ],
    [ 0.8, 0.0, 0.0 ]
];

var triangles = [
    [ 0, 1, 4 ],
    [ 4, 1, 3 ],
    [ 3, 1, 2 ],
    [ 10, 13, 11 ],
    [ 13, 11, 14 ],
    [ 1, 6, 2 ],
    [ 2, 6, 7 ],
    [ 2, 7, 3 ],
    [ 3, 7, 8 ],
    [ 3, 8, 4 ],
    [ 4, 8, 9 ],
    [ 12, 15, 10 ],
    [ 10, 15, 13 ],
    [ 5, 9, 6 ],
    [ 6, 9, 7 ],
    [ 7, 9, 8 ]
];

In truth, this array-of-arrays representation is used because it makes geometry processing more straightforward, which we'll see later on. To use these tables for rendering, we must flatten each to a single linear array. This JavaScript function does so, returning its input in a new, flat array.

function flatten(a) {
return a.reduce(function (b, v) { b.push.apply(b, v); return b }, [])
}