three.js - threejs Adding lighting to ShaderMaterial -

i'm creating cube full of spheres. i'm using particle system. it's working until try apply shader material each of particles. i've pretty used example @ http://threejs.org/examples/#webgl_custom_attributes_particles3.

it working, i'm trying add lighting scene using directional lighting. that's i'm not getting anywhere. have no experience in glsl , copying , pasting @ moment, testing waters. great.

here's have 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 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; (var = -7; < 9; i++) {     (var j = -7; j < 9; j++) {         (var k = -7; k < 8; k++) {             var px = * 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;  (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.