Three.js (r61) - Flying Spheres

Fiddle exploring how to create animated objects using the r61 of three.js.

by brady houseknecht

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.js"></script>
<h3>&nbsp; Flying 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) {

    var me = app;

    app.model = {
        Sphere: {
            location: {
                x: 0,
                y: 0,
                z: 0
            },
            dimensions: {
                w: 18,
                h: 18,
                d: 18
            },
            color: 0x0EEE00,
            mesh: null,
            getMesh: function () {
                var me = this;
                if (!me.mesh) {
                    me.inflateMesh();
                }
                return me.mesh;
            },
            setColor: function (hex) {
                this.color = hex;
            },
            inflateMesh: function () {
                var me = this,
                    hexColor = me.color,
                    material = new THREE.MeshLambertMaterial({
                        color: hexColor,
                        side: THREE.DoubleSide
                    }),
                    width = me.dimensions.w,
                    height = me.dimensions.h,
                    depth = me.dimensions.d,
                    geometry = new THREE.SphereGeometry(width, height, depth);
                this.mesh = new THREE.Mesh(geometry, material);
            },
            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;
                            mesh.position.x = vector.x % 200;
                            mesh.rotation.z = vector.x / 18;
                            break;
                        case 'z':
                  ...