threejs Adding lighting to ShaderMaterial - three.js

Question

I'm creating a cube full of spheres. So I'm using a particle system. It's all working well until I try to apply a shader material to each of the particles. I've pretty much used the example at http://threejs.org/examples/#webgl_custom_attributes_particles3.
It is working, but what I'm trying to do now is add lighting to the scene using directional lighting. That's where I'm not getting anywhere. I have no experience in GLSL and am just copying and pasting at the moment, testing the waters. Any help would be great.
Here's what I have so far.
<script type="x-shader/x-vertex" id="vertexshader">
attribute float size;
attribute vec4 ca;
varying vec4 vColor;
void main() {
vColor = ca;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( 150.0 / length( mvPosition.xyz ) );
gl_Position = projectionMatrix * mvPosition;
}
</script>
<script type="x-shader/x-fragment" id="fragmentshader">
uniform vec3 color;
uniform sampler2D texture;
varying vec4 vColor;
void main() {
vec4 outColor = texture2D( texture, gl_PointCoord );
if ( outColor.a < 0.5 ) discard;
gl_FragColor = outColor * vec4( color * vColor.xyz, 1.0 );
float depth = gl_FragCoord.z / gl_FragCoord.w;
const vec3 fogColor = vec3( 0.0 );
float fogFactor = smoothstep( 200.0, 700.0, depth );
gl_FragColor = mix( gl_FragColor, vec4( fogColor, gl_FragColor.w ), fogFactor );
}
</script>
and in my js:
(function addSpheres() {
var cube = new THREE.Object3D();
scene.add(cube);
var totalSpheres = 3840; //15*16*16
var particles = new THREE.Geometry();
var attributes = {
size: { type: 'f', value: [] },
ca: { type: 'c', value: [] }
};
var uniforms = {
amplitude: { type: "f", value: 1.0 },
color: { type: "c", value: new THREE.Color(0xffffff) },
texture: { type: "t", value: THREE.ImageUtils.loadTexture("textures/sprites/ball.png") }
};
uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping;
var shaderMaterial = new THREE.ShaderMaterial({
uniforms: uniforms,
attributes: attributes,
vertexShader: document.getElementById('vertexshader').textContent,
fragmentShader: document.getElementById('fragmentshader').textContent,
});
shaderMaterial.lights = true;
var n = 20, n2 = n / 2;
var particle;
for (var i = -7; i < 9; i++) {
for (var j = -7; j < 9; j++) {
for (var k = -7; k < 8; k++) {
var pX = i * n - n2;
var pY = j * n - n2;
var pZ = k * n - n2;
particle = new THREE.Vector3(pX, pY, pZ);
particles.vertices.push(particle);
}
}
}
particleSystem = new THREE.ParticleSystem(particles, shaderMaterial);
particleSystem.dynamic = true;
// custom attributes
var vertices = particleSystem.geometry.vertices;
var values_size = attributes.size.value;
var values_color = attributes.ca.value;
for (var v = 0; v < vertices.length; v++) {
attributes.size.value[v] = 55;
attributes.ca.value[v] = new THREE.Color(0xffffff);
attributes.size.needsUpdate = true;
attributes.ca.needsUpdate = true;
}
cube.add(particleSystem);
scene.matrixAutoUpdate = false;
})();
Thanks in advance.
John.