m0nkey/augment.css

## augment.css

#main {
  margin: 0px;
  width: 480px;
  height: 300px;
}

## augment.js
document.ontouchmove = function(e){ e.preventDefault(); }


/**
 * Provides requestAnimationFrame in a cross browser way.
 * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
 */

if ( !window.requestAnimationFrame ) {

  window.requestAnimationFrame = ( function() {

    return window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

	window.setTimeout( callback, 1000 / 60 );

      };

  } )();

}


$(function(){

  var camera, scene, renderer, target;


  init();
  animate();

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


    var lightpos = [{x:0,z:0,y:200},{x:0,z:200,y:0}]

    for( var i = 0; i < lightpos.length; i++ ) {
      var pointLight = new THREE.PointLight( 0xFFFFFF, 0.8 );
      pointLight.position = lightpos[i]
      scene.addLight(pointLight);
    }

    buildscene(scene)


    target = new THREE.Object3D()
    target.position = {x:0,y:10,z:-100}

    camera = new THREE.Camera( 75, 480/300, 1, 10000, target );
    camera.position.z = 0;
    camera.position.y = 20;


    renderer = new THREE.CanvasRenderer();
    //renderer = new THREE.WebGLRenderer();
    renderer.setSize( 480, 300 )

    $('#main').append( renderer.domElement );

  }


  function buildscene(scene) {

    var geometry, material, mesh, size=10, target, num=2


    for( var xI = -1*num; xI <= num; xI++ ) {
      var xd = (2*xI*size)

      for( var zI = -1*num; zI <= num; zI++ ) {
        var zd = (2*zI*size)

        var cb = (xI+num+1)*(zI+num+1)*(256/(num*num))
        var color = 0x33ff33 * cb //((cb/2)*0x10000) + (cb*0x100) + (cb/2)

        material = new THREE.MeshLambertMaterial( { color: color, shading: THREE.FlatShading, wireframe: false } );
        //material = new THREE.MeshBasicMaterial( { color: 0xff0000, shading: THREE.FlatShading, wireframe: true } );
        geometry = new THREE.Cube( size, size/3, size );
        mesh = new THREE.Mesh( geometry, material );

        mesh.position.x = xd
        mesh.position.z = zd

        scene.addObject( mesh );
      }
    }

  }


  function animate() {
    requestAnimationFrame( animate );
    render();
  }


  var t = 0;

  function render() {

    //mesh.rotation.x += 0.001;
    //mesh.rotation.y += 0.002;

    t = (t+(Math.PI/180))

    target.position.x = 100 * Math.cos(t)
    target.position.z = 100 * Math.sin(t)

    renderer.render( scene, camera );
  }

})

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="user-scalable=no,initial-scale=1.0">
  <meta name="apple-mobile-web-app-capable" content="yes">

  <link rel="stylesheet" href="augment.css" />

  <script src="jquery.js"></script>
  <script src="three.js"></script>
  <script src="augment.js"></script>
</head>
<body style="margin:0px;padding:0px">
<div id="main"></div>
</body>
</html>

<!-- you'll need:
PhoneGap
jQuery
https://github.com/mrdoob/three.js/
-->
	document.ontouchmove = function(e){ e.preventDefault(); }


	/**
	* Provides requestAnimationFrame in a cross browser way.
	* http://paulirish.com/2011/requestanimationframe-for-smart-animating/
	*/

	if ( !window.requestAnimationFrame ) {

	window.requestAnimationFrame = ( function() {

	return window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function( /* function FrameRequestCallback / callback, / DOMElement Element */ element ) {

	window.setTimeout( callback, 1000 / 60 );

	};

	} )();

	}


	$(function(){

	var camera, scene, renderer, target;


	init();
	animate();

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


	var lightpos = [{x:0,z:0,y:200},{x:0,z:200,y:0}]

	for( var i = 0; i < lightpos.length; i++ ) {
	var pointLight = new THREE.PointLight( 0xFFFFFF, 0.8 );
	pointLight.position = lightpos[i]
	scene.addLight(pointLight);
	}

	buildscene(scene)


	target = new THREE.Object3D()
	target.position = {x:0,y:10,z:-100}

	camera = new THREE.Camera( 75, 480/300, 1, 10000, target );
	camera.position.z = 0;
	camera.position.y = 20;


	renderer = new THREE.CanvasRenderer();
	//renderer = new THREE.WebGLRenderer();
	renderer.setSize( 480, 300 )

	$('#main').append( renderer.domElement );

	}


	function buildscene(scene) {

	var geometry, material, mesh, size=10, target, num=2



	for( var xI = -1*num; xI <= num; xI++ ) {
	var xd = (2xIsize)

	for( var zI = -1*num; zI <= num; zI++ ) {
	var zd = (2zIsize)

	var cb = (xI+num+1)(zI+num+1)(256/(num*num))
	var color = 0x33ff33 * cb //((cb/2)0x10000) + (cb0x100) + (cb/2)

	material = new THREE.MeshLambertMaterial( { color: color, shading: THREE.FlatShading, wireframe: false } );
	//material = new THREE.MeshBasicMaterial( { color: 0xff0000, shading: THREE.FlatShading, wireframe: true } );
	geometry = new THREE.Cube( size, size/3, size );
	mesh = new THREE.Mesh( geometry, material );

	mesh.position.x = xd
	mesh.position.z = zd

	scene.addObject( mesh );
	}
	}

	}


	function animate() {
	requestAnimationFrame( animate );
	render();
	}


	var t = 0;

	function render() {

	//mesh.rotation.x += 0.001;
	//mesh.rotation.y += 0.002;

	t = (t+(Math.PI/180))

	target.position.x = 100 * Math.cos(t)
	target.position.z = 100 * Math.sin(t)

	renderer.render( scene, camera );
	}

	})
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="user-scalable=no,initial-scale=1.0">
	<meta name="apple-mobile-web-app-capable" content="yes">

	<link rel="stylesheet" href="augment.css" />

	<script src="jquery.js"></script>
	<script src="three.js"></script>
	<script src="augment.js"></script>
	</head>
	<body style="margin:0px;padding:0px">
	<div id="main"></div>
	</body>
	</html>

	<!-- you'll need:
	PhoneGap
	jQuery
	https://github.com/mrdoob/three.js/
	-->