Minimal three.js shader example.

Makefile

all:
	open three.js.shader.html

three.js.shader.html

<script id="vertexShader" type="x-shader/x-vertex">
  uniform float time;
  uniform vec2 resolution;
  void main()	{
      gl_Position = vec4( position, 1.0 );
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  uniform float time;
  uniform vec2 resolution;
  void main()	{
      float x = mod(time + gl_FragCoord.x, 20.) < 10. ? 1. : 0.;
      float y = mod(time + gl_FragCoord.y, 20.) < 10. ? 1. : 0.;
      gl_FragColor = vec4(vec3(min(x, y)), 1.);
  }
</script>
<div/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/103/three.min.js"></script>
<script src="x.js"></script>

x.js

var camera   = new THREE.Camera();
var scene    = new THREE.Scene();
var uniforms = { time:       { type: "f", value: 1.0 },
		 resolution: { type: "v2", value: new THREE.Vector2() }};
var material = new THREE.ShaderMaterial({
    uniforms:       uniforms,
    vertexShader:   document.getElementById(  'vertexShader').textContent,
    fragmentShader: document.getElementById('fragmentShader').textContent});
var mesh     = new THREE.Mesh(new THREE.PlaneGeometry(2, 2), material);
var renderer = new THREE.WebGLRenderer();
scene.add(mesh);
//camera.position.z = 1;
renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1);
document.body.appendChild(renderer.domElement);
uniforms.resolution.value.x = window.innerWidth;
uniforms.resolution.value.y = window.innerHeight;
renderer.setSize(window.innerWidth, window.innerHeight);
var startTime = Date.now();
(function(){
    requestAnimationFrame(arguments.callee);
    var elapsedMilliseconds = Date.now() - startTime;
    var elapsedSeconds = elapsedMilliseconds / 1000.;
    uniforms.time.value = 60. * elapsedSeconds;
    renderer.render(scene, camera);})()