studioijeoma/gist:1189773

## gistfile1.txt
<!DOCTYPE HTML>
<html lang="en">
	<head>
		<title>three.js canvas line gridlayout</title>
		<meta charset="utf-8">
		<style type="text/css">
body {
	font-family:Monospace;
	background-color:#000000;
	margin:0px;
	overflow:hidden;
}
		</style>
	</head>
	<body>
		<script type="text/javascript" src="js/Three.js"></script>
		<script type="text/javascript">
			var container;
			var camera, scene, projector, renderer;

			var pyramids = [];

			setup();

			function setup() {
				camera = new THREE.TrackballCamera({
					fov : 60,
					aspect : window.innerWidth / window.innerHeight,
					near : 1,
					far : 1e3,

					rotateSpeed : 1.0,
					zoomSpeed : 1.2,
					panSpeed : 0.8,

					noZoom : false,
					noPan : false,

					staticMoving : true,
					dynamicDampingFactor : 0.3,

					keys : [65, 83, 68]
				});

				camera.position.z = 800;
				scene = new THREE.Scene();
				renderer = new THREE.CanvasRenderer();
				renderer.setSize(window.innerWidth, window.innerHeight);

				document.body.appendChild(renderer.domElement);

				createLines();

				setInterval(update, 1000 / 30);
			}

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

			function createLines() {
				var w = 100;
				var h = 300;
				var d = 200;
				var r = 10;
				var c = 10;

				var geometry = new THREE.Geometry();

				for(var i = 0; i < r; i++) {
					for(var j = 0; j < c; j++) {
						var x = i * w;
						var y = j * h;

						geometry.vertices.push(new THREE.Vertex(x, y, 0));
						geometry.vertices.push(new THREE.Vertex(x, y, 100));

						console.log(new THREE.Vertex(x, y, 0));

						var material = new THREE.LineBasicMaterial({
							color : 0xffffff,
							opacity : 1.0,
							linewidth : 10.0
						});

						var mesh = new THREE.Line(geometry, material);
						// mesh.position.x = i * w;
						// mesh.position.y = j * d;
						// mesh.position.z = h / 2;

						scene.addChild(mesh);
					}
				}

			}
		</script>
	</body>
</html>
	<!DOCTYPE HTML>
	<html lang="en">
	<head>
	<title>three.js canvas line gridlayout</title>
	<meta charset="utf-8">
	<style type="text/css">
	body {
	font-family:Monospace;
	background-color:#000000;
	margin:0px;
	overflow:hidden;
	}
	</style>
	</head>
	<body>
	<script type="text/javascript" src="js/Three.js"></script>
	<script type="text/javascript">
	var container;
	var camera, scene, projector, renderer;

	var pyramids = [];

	setup();

	function setup() {
	camera = new THREE.TrackballCamera({
	fov : 60,
	aspect : window.innerWidth / window.innerHeight,
	near : 1,
	far : 1e3,

	rotateSpeed : 1.0,
	zoomSpeed : 1.2,
	panSpeed : 0.8,

	noZoom : false,
	noPan : false,

	staticMoving : true,
	dynamicDampingFactor : 0.3,

	keys : [65, 83, 68]
	});

	camera.position.z = 800;
	scene = new THREE.Scene();
	renderer = new THREE.CanvasRenderer();
	renderer.setSize(window.innerWidth, window.innerHeight);

	document.body.appendChild(renderer.domElement);

	createLines();

	setInterval(update, 1000 / 30);
	}

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

	function createLines() {
	var w = 100;
	var h = 300;
	var d = 200;
	var r = 10;
	var c = 10;

	var geometry = new THREE.Geometry();

	for(var i = 0; i < r; i++) {
	for(var j = 0; j < c; j++) {
	var x = i * w;
	var y = j * h;

	geometry.vertices.push(new THREE.Vertex(x, y, 0));
	geometry.vertices.push(new THREE.Vertex(x, y, 100));

	console.log(new THREE.Vertex(x, y, 0));

	var material = new THREE.LineBasicMaterial({
	color : 0xffffff,
	opacity : 1.0,
	linewidth : 10.0
	});

	var mesh = new THREE.Line(geometry, material);
	// mesh.position.x = i * w;
	// mesh.position.y = j * d;
	// mesh.position.z = h / 2;

	scene.addChild(mesh);
	}
	}

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