Render.js

/*
    3D Countdown Using THREE.js
    Latest Rev: 9/15/2015
*/

//Globals
var container, scene, camera, renderer, controls, width, height, minutes, tens, seconds, cDGroup, boxWidth = -1, boxHeight;

//Font size
var SIZE = 100;

//Total countdown in seconds
/*
    LIMITATION: 599s as no code is currently in place to handle more than 9:59 of countdown.
    600 (10:00) will display as [?]:00 (Actual output unknown, I just know it wont work)
 */
var time = 300, mts;

var isrunning = true;
var numberToStart = 9;
//var currentNum = istesting ? numberToStart : numberToStart;

var getMTS = function() {
    var t = time;
    //Get minutes
    var ms = Math.floor(time / 60);
    t -= ms*60;
    //Get TENS of seconds
    var ts = Math.floor(t / 10);
    t -= ts*10;
    //Whatever is left is the ONES of seconds
    var s = t;

    return [ms, ts, s]
};

function init() {
    // SCENE
    scene = new THREE.Scene();

    // CAMERA
    var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
    var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 1, FAR = 20000;
    camera = new THREE.OrthographicCamera(SCREEN_WIDTH / -2, SCREEN_WIDTH / 2, SCREEN_HEIGHT  / 2, SCREEN_HEIGHT  / -2, NEAR, FAR);
    scene.add(camera);
    camera.position.set(0,0,1000);
    camera.lookAt(scene.position);

    //Setup renderer
    renderer = new THREE.WebGLRenderer( {antialias:true, alpha: false} );
    renderer.setClearColor( 0x19181A); //Background color hex
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    container = document.getElementById( 'canvas' );
    container.appendChild( renderer.domElement );

    //CONTROLS
    controls = new THREE.OrbitControls( camera );
    controls.damping = 0.2;
    controls.addEventListener( 'change', render );

    // LIGHT
    var z = 150;
    //scene.add(createLight([0,0,z]));
    scene.add(createLight([0,0,z]));
    //Initial render
    renderTime();
}

var renderTime = function() {
    //Don't remove null group, otherwise clear for next OBJ render
    if(cDGroup != null && typeof cDGroup != 'undefined') {
        cDGroup.remove(seconds);
        cDGroup.remove(tens);
        cDGroup.remove(minutes);
    }
    /*
        Go from time, to value of
        [
            minutes,
            TENS of seconds,
            ONES of seconds
        ]
    */
    mts = getMTS();

    //Render the objects
    minutes = renderText(mts[0]);
    tens = renderText(mts[1], true);
    seconds = renderText(mts[2]);
    colon = renderText(":");

    //Position the objects, relative to the text size
    minutes.position.x += SIZE * (-22 / 12);
    colon.position.x -= SIZE * (1/12);
    tens.position.x += SIZE * (2/3);
    seconds.position.x += SIZE * 2.5;

    //Group objects
    cDGroup = new THREE.Object3D();

    cDGroup.add(seconds);
    cDGroup.add(tens);
    cDGroup.add(minutes);
    cDGroup.add(colon);

    //Calculate center of screen, only first time
    if(boxWidth == -1) {
        var bbox = new THREE.Box3().setFromObject(cDGroup);
        boxWidth = bbox.max.x - bbox.min.x;
        boxHeight = bbox.max.y - bbox.min.y;
    }
    //Position and add group to scene
    cDGroup.position.x = window.innerWidth / 4 - boxWidth;
    cDGroup.position.y = window.innerHeight / 4 - boxHeight;

    scene.add(cDGroup);
};

var renderText = function(currentNum, isTens) {
    var number;
    //Special case
    if(currentNum == ":") {
        var textObject = createTextObject(":");
        return textObject;
    }
    //Set key to current number (X), and next (Y) such that key is "XY"
    if(!isTens) {
        number = currentNum + "";
        currentNum--;
        if(currentNum < 0) currentNum = 9;
        number += currentNum;
    } else {
        //If the number is the tens place, AND the tens are 0, prepare to move from 0 to 5 (for 59 seconds)
        if(currentNum == 0) {
            number = "50";
        } else {
            //Otherwise normal
            number = currentNum + "";
            currentNum--;
            if(currentNum < 0) currentNum = 9;
            number += currentNum;
        }
    }
    //Create and return the text object
    var textObject = createTextObject(number);
    return textObject;
};

var createLight = function(position) {
    var light = new THREE.DirectionalLight( 0xBBBBBB, 1, 0 );
    light.position.set(position[0], position[1], position[2]);
    return light;
};

var width = SIZE;
var height = width;
var ratio = height / width;
var lineWidth = width / 3;

var createTextObject = function(letter, params) {
    //Central cube
    var cubeSize = 0; //No size, invisible
    var centralCubeGeometry = new THREE.BoxGeometry( cubeSize,cubeSize,cubeSize );
    var centralCubeMaterial = new THREE.MeshBasicMaterial( { color: 0x00ff00, alpha: 0 } );
    var centralCube = new THREE.Mesh( centralCubeGeometry, centralCubeMaterial );

    //Placement cube (from TL corner)
    cubeSize = 0; //No size, invisible
    var growthCubeGeometry = new THREE.BoxGeometry( cubeSize,cubeSize,cubeSize );
    var growthCubeMaterial = new THREE.MeshBasicMaterial( { color: 0x0000ff, alpha: 0 } );
    var growthCube = new THREE.Mesh( growthCubeGeometry, growthCubeMaterial );

    growthCube.position.x = -(width / 2) + 2.5;
    growthCube.position.y = (height / 2) - 2.5;
    growthCube.position.z = (width / 2) - 2.5;

    centralCube.add(growthCube);

    //Temporary array of geometry
    //Geometry for each object stored in js/LettersBlock.js
    var loadedLetters = JSON.parse(JSON.stringify(letters));
    var letter = loadedLetters[letter];

    for(var i = 0; i < letter.length; i++) {
        var line = letter[i];
        var dimensions = line[1];
        var location = line[0];

        //Scale dimensions
        dimensions[0] = (dimensions[0] == 0) ? lineWidth : width * dimensions[0];
        dimensions[1] = (dimensions[1] == 0) ? lineWidth : height * dimensions[1];
        dimensions[2] = (dimensions[2] == 0) ? lineWidth : width * dimensions[2];

        //Scale locations
        location[0] += (location[0] == 0) ? dimensions[0] / 2 : (dimensions[0] / 2) + (width * location[0]);
        location[0] -= 2.5;
        location[1] -= (location[1] == 0) ? dimensions[1] / 2 : (dimensions[1] / 2) + (height * location[1]);
        location[1] += 2.5;
        location[2] = (location[2] == 0) ? dimensions[2] / 2 : (dimensions[2] / 2) + (width * location[2]);

        //MOD locations
        location[0] += (location[3] == 0) ? 0 : dimensions[0] * location[3];
        location[1] += (location[4] == 0) ? 0 : dimensions[1] * location[4];
        location[1] -= location[4];
        location[2] -= (location[5] == 0 || typeof location[5] == 'undefined') ? 0 : dimensions[2] * location[2];

        //Create and position geometry
        var lineGeom = new THREE.BoxGeometry( dimensions[0],dimensions[1],dimensions[2] );
        lineGeom.computeFaceNormals();
        var lineMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, shading: THREE.FlatShading } ); //Color of text
        var newLine = new THREE.Mesh( lineGeom, lineMaterial );

        newLine.position.x = location[0];
        newLine.position.y = location[1];
        newLine.position.z = location[2];

        growthCube.add(newLine);
    }

    return centralCube;
};

//Rotation and positioning stuff
var i = 0;
var delay = 0;

function render() {
    if(isrunning) {
        //5 frame window when stopped
        //All rotation in increments of PI/110
        if(i < 55) {
            //Rotate seconds
            seconds.rotateY(Math.PI / 110);
            //If no ones of seconds left, rotate tens
            if(mts[2] < 1) {
                tens.rotateY(Math.PI / 110);
            }
            //If tens of seconds is 0, maybe rotate
            if(mts[1] < 1) {
                var n = (mts[1] * 10) + mts[2];
                //if no seconds left, turn to next minute down
                if(n == 0) {
                    minutes.rotateY(Math.PI / 110);
                }
            }
        } else if(i == 60) {
            //Reset, count down time, and stop if needed
            i = 0;
            time--;
            renderTime();
            if(time == 0) {
                isrunning = false;
            }
        }
    }
    i++;
    //Render changes
    renderer.render( scene, camera );
}

function animate() {
    //Update controls, render everything anew, and start the animation method again
    window.requestAnimationFrame( animate );
    controls.update();
    render();
}
//Setup and start animation loop (every 1/60s)
init();
animate();