MDN Games: Shaders demo

HTML

<script src="https://end3r.github.io/MDN-Games-3D/Shaders/js/three.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
	void main() {
		gl_Position = projectionMatrix * modelViewMatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0);
	}
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
	void main() {
		gl_FragColor = vec4(0.0, 0.58, 0.86, 1.0);
	}
</script>

CSS

body { margin: 0; padding: 0; font-size: 0; }
canvas { width: 100%; height: 100%; }

JavaScript

var WIDTH = window.innerWidth;
	var HEIGHT = window.innerHeight;

	var renderer = new THREE.WebGLRenderer({antialias:true});
	renderer.setSize(WIDTH, HEIGHT);
	renderer.setClearColor(0xDDDDDD, 1);
	document.body.appendChild(renderer.domElement);

	var scene = new THREE.Scene();

	var camera = new THREE.PerspectiveCamera(70, WIDTH/HEIGHT);
	camera.position.z = 50;
	scene.add(camera);

	var boxGeometry = new THREE.BoxGeometry(10, 10, 10);

	var shaderMaterial = new THREE.ShaderMaterial( {
		vertexShader: document.getElementById( 'vertexShader' ).textContent,
		fragmentShader: document.getElementById( 'fragmentShader' ).textContent
	});

	var cube = new THREE.Mesh(boxGeometry, shaderMaterial);
	scene.add(cube);
	cube.rotation.set(0.4, 0.2, 0);

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