jonathanlurie/index.html

## index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Three.js Geometry Browser</title>
  <style>


  body {
    margin:0;
    font-family: 'monospace';
    font-size: 15px;
    line-height: 18px;
    overflow: hidden;
  }

  </style>
</head>
<body>

  <script src="https://threejs.org/build/three.min.js"></script>
  <script src='https://threejs.org/examples/js/libs/dat.gui.min.js'></script>
  <script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

  <script src="js/shaders.js"></script>
  <script>

  var gui = null
  var renderer = null
  var scene = null
  var camera = null
  var container = null

  function init(){

    gui = new dat.GUI();
    renderer = new THREE.WebGLRenderer( { antialias: false } );
    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
    container = new THREE.Object3D();

    camera.position.z = 30;

    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0xEEEEEE, 1 );
    document.body.appendChild( renderer.domElement );

    var orbit = new THREE.OrbitControls( camera, renderer.domElement );

    var geometry = new THREE.PlaneBufferGeometry( 5, 5, 1 );
    var material = new THREE.MeshBasicMaterial( {color: 0xaa0a00, side: THREE.DoubleSide} );
    var plane = new THREE.Mesh( geometry, material );
    container.add( plane );

    scene.add( container );

    console.log(shaders.vertex);
  }


  function render() {
    requestAnimationFrame( render );
    renderer.render( scene, camera );
  };


  window.addEventListener( 'resize', function () {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( window.innerWidth, window.innerHeight );
  }, false );


  init();
  render();

  </script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Three.js Geometry Browser</title>
	<style>


	body {
	margin:0;
	font-family: 'monospace';
	font-size: 15px;
	line-height: 18px;
	overflow: hidden;
	}

	</style>
	</head>
	<body>

	<script src="https://threejs.org/build/three.min.js"></script>
	<script src='https://threejs.org/examples/js/libs/dat.gui.min.js'></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

	<script src="js/shaders.js"></script>
	<script>

	var gui = null
	var renderer = null
	var scene = null
	var camera = null
	var container = null

	function init(){

	gui = new dat.GUI();
	renderer = new THREE.WebGLRenderer( { antialias: false } );
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
	container = new THREE.Object3D();

	camera.position.z = 30;

	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	renderer.setClearColor( 0xEEEEEE, 1 );
	document.body.appendChild( renderer.domElement );

	var orbit = new THREE.OrbitControls( camera, renderer.domElement );

	var geometry = new THREE.PlaneBufferGeometry( 5, 5, 1 );
	var material = new THREE.MeshBasicMaterial( {color: 0xaa0a00, side: THREE.DoubleSide} );
	var plane = new THREE.Mesh( geometry, material );
	container.add( plane );

	scene.add( container );

	console.log(shaders.vertex);
	}


	function render() {
	requestAnimationFrame( render );
	renderer.render( scene, camera );
	};


	window.addEventListener( 'resize', function () {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
	}, false );



	init();
	render();

	</script>
	</body>
	</html>