var camera, controls, scene, renderer, cube, plane;

function init () {

  var angle = 60;
  var width = window.innerWidth;
  var height = window.innerHeight;
  var aspect = width / height;
  var near = .1;
  var far = 1000;

  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(angle, aspect, near, far);
  
  renderer = new THREE.WebGLRenderer();
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.setClearColor( 0xf0f0f0 );
  document.body.appendChild( renderer.domElement );

  var planeGeometry = new THREE.PlaneGeometry(10,10,12,12);
  var planeMaterial = new THREE.MeshBasicMaterial( { color: 0x888888, wireframe:true } );
  plane = new THREE.Mesh(planeGeometry, planeMaterial);
  scene.add( plane );

  camera.position.z = 10;
  controls = new THREE.OrbitControls( camera, renderer.domElement );
  
  window.addEventListener( 'resize', onWindowResize, false );
}

function onWindowResize () {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();

  renderer.setSize( window.innerWidth, window.innerHeight );

}

function render () {
  requestAnimationFrame( render );

  renderer.render(scene, camera);
}


init();
render();