var scene = new THREE.Scene();
var group = new THREE.Object3D();

var renderer = new THREE.WebGLRenderer( { antialias: false } );
renderer.setClearColor( 0x333333, 1 );

var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, .01, 100000 );
camera.position.set( 0, 0, 2 );



var gridHelper = new THREE.GridHelper( 5, 10, 0xDDDDDD );
gridHelper.position.y = - 1;
scene.add( gridHelper );

//start progressbar

var group = new THREE.Group();
var barGeo = new THREE.PlaneBufferGeometry( 2, 0.2 );
barGeo.translate( 0.5, 0.5, 0 );
var barMat = new THREE.MeshBasicMaterial( { color: 0xcccccc, opacity: 1, transparent: true, wireframe: false } );

var bg = new THREE.Mesh( barGeo, barMat );

progressGeometry = new THREE.PlaneBufferGeometry( 2, 0.2 );
progressGeometry.translate( 0.5, 0.5, 0 );
progressMat = new THREE.MeshBasicMaterial( { color: 0xffffff, opacity: 1, transparent: true, wireframe: false } );

var progress = new THREE.Mesh( progressGeometry, progressMat );

progress.scale.x = 0;

// move progress bar to to the start of the background bar
progress.position.x = -1;

group.add( bg );
group.add( progress );

//end progress bar

scene.add( group );

camera.lookAt( group );


document.body.appendChild( renderer.domElement );

window.addEventListener( 'resize', resize, false );
resize();


renderer.animate( loop );

function resize() {

	var width = window.innerWidth;
	var height = window.innerHeight;

	renderer.setSize( width, height );
	camera.aspect = width / height;
	camera.updateProjectionMatrix();

}

function loop() {

	orbitControls.update();
	renderer.render( scene, camera );

	if ( progress.scale.x <= 1 ) {
		
    // update the scale and also move the bar a bit to the right
		progress.scale.x += 0.001;
    //progress.position.x += 0.001;

	} else {
		
    // restart the animation
		progress.scale.x = 0;
    progress.position.x = -1;

	}

}