index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Shaders demo</title>
	<style>
		body { margin: 0; padding: 0; font-size: 0; }
		canvas { width: 100%; height: 100%; }
		button { margin: 10px; height: 2em; }
	</style>
	
	<script>
		function hideButtons() {
			var btnCont = document.getElementById("btnCont");
			btnCont.style.display = "none";
		}
	</script>
	
	<script src="three.min.js"></script>
	<script src="shader_simple.js"></script>
	<script src="shader_ext_phong.js"></script>
	<script src="shader_full_win.js"></script>
</head>
<body>
	<div id="btnCont">
		<button onclick="simleShader.init();hideButtons()">Simple Shader</button>
		<button onclick="extPhongShader.init();hideButtons()">Extend Phong Shading</button>
		<button onclick="fullWindowShader.init(0);hideButtons()">effect 0</button>
		<button onclick="fullWindowShader.init(1);hideButtons()">effect 1</button>
		<button onclick="fullWindowShader.init(2);hideButtons()">effect 2</button>
	</div>
</body>
</html>