Three.js (r61) - 18 Spheres

Fiddle exploring how to add a variable (n) number of sphere meshes to a scene and then move in a repetitive fashion.

by brady houseknecht

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.js"></script>
<h3>18 Spheres</h3>
<div class="container enter-stage-south">
    <div id="viewport-container" class="well">
        <div id="viewport"></div>
    </div>
</div>

CSS

.enter-stage-south {
    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    -moz-animation-name: slide-up;
    -webkit-animation-name: slide-up;
}
@-moz-keyframes slide-up {
    from {
        margin-top: 100%;
    }
    to {
        margin-top: 0%;
    }
}
@-webkit-keyframes slide-up {
    from {
        margin-top: 100%;
    }
    to {
        margin-top: 0%;
    }
}

JavaScript

(function (app, $, undefined) {

    app.model = {
        Sphere: {
            location: {
                x: 0,
                y: 0,
                z: 0
            },
            segments: {
                width: 22,
                height: 22
            },
            radius: 10,
            colorIndex: 0,
            mesh: null,
            getMesh: function () {
                var me = this;
                if (!me.mesh) {
                    me.inflateMesh();
                }
                return me.mesh;
            },
            setColor: function (id) {
                var me = this;
                me.colorIndex = id;
            },
            inflateMesh: function () {
                var me = this,
                    colorId = me.colorIndex,
                    material = new THREE.MeshLambertMaterial({
                        color: app.util.colors.blueGray.spectrum[colorId],
                        side: THREE.DoubleSide
                    }),
                    widthSegments = me.segments.width,
                    heightSegments = me.segments.height,
                    sphereRadius = me.radius,
                    geometry = new THREE.SphereGeometry(sphereRadius, widthSegments, heightSegments);
                me.mesh = new THREE.Mesh(geometry, material);
                geometry.computeFaceNormals();
                geometry.computeVertexNormals();
            },
            setLocation: function (x, y, z) {
                this.location.x = x;
                this.location.y = y;
                this.location.z = z;
            },
            getLocation: function () {
                return this.location;
            },
            move: function (axis, direction) {
                var vector = this.getLocation(),
                    mesh = this.getMesh();
                if (mesh != null) {
                    switch (axis) {
                        case 'x':
                            vector.x += 1 * direction;
              ...