dither or 'dotted' shading, for threejs_playGnd

ditherShader.js

  			
				/* ------------------- INSTRUCTIONS -----

				to shade your scene 'dithered' or 'dotted'
				you must first add this shader file to your HTML page
				add the following tag belelow the Detector.js 
				which is on line 16

				-------------------------------------- */

		<script src="http://brangerbriz.net/labs/threejs_playGnd/js/ShaderToon.js"></script>
		
				/* -------------------------------------- 	
				then add the following createShaderMaterial() function
				between your setup() function and your
				draw() function
				-------------------------------------- */
				
				function createShaderMaterial( id, light, ambientLight ) {
					var shader = THREE.ShaderToon[ id ];
					var u = THREE.UniformsUtils.clone( shader.uniforms );
					var vs = shader.vertexShader;
					var fs = shader.fragmentShader;
					var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
					material.uniforms.uDirLightPos.value = light.position;
					material.uniforms.uDirLightColor.value = light.color;
					material.uniforms.uAmbientLightColor.value = ambientLight.color;
					return material;
				}
				 

				/* -------------------------------------- 	
				then create your mesh 
				and replace "material = new THREE.Mesh..."
				with the code below
				-------------------------------------- */


				material = createShaderMaterial( "dotted", directionalLight, ambientLight );
				material.uniforms.uBaseColor.value.setHex( 0x000000 );
				material.uniforms.uLineColor1.value.setHex( 0xff00ff );
					

				/* -------------------------------------- 
		       		you can change the color of the dots by changing 
		       		the hex values of uBaseColor and uLineColor1

		        	you can also change "dotted" to "hatching"

		        	NOTE: this material requires lights, notice the code above
		              		references two lights after "dotted"
		              		make sure to include the lights (code below)
		              		in your setup() function
		        	-------------------------------------- */

				directionalLight = new THREE.DirectionalLight(0xffffff);
				directionalLight.position.set( 0.96, 1.78, 0 );
				scene.add( directionalLight );

				ambientLight = new THREE.AmbientLight( 0x080808 );
				scene.add( ambientLight );

i followed the steps with this snippet but still not working . How can i get some helps?

@ daniel880420 are u getting any errors in ur JavaScript console in ur browser? it might just be the fact that this is pretty old now :/ there have been lots of updates to three.js since we made this project, it's probably worth a big update... one day... when there's time

@ daniel880420 are u getting any errors in ur JavaScript console in ur browser? it might just be the fact that this is pretty old now :/ there have been lots of updates to three.js since we made this project, it's probably worth a big update... one day... when there's time

here's my code wish u can check it if theres anything wrong，thanks!!!

<style> body { background-color: #ffffff; margin: 0; overflow: hidden; } </style>

	<script src="http://threejsplaygnd.brangerbriz.net/js/three.min.js"></script>
	<script src="http://threejsplaygnd.brangerbriz.net/js/Detector.js"></script>
	<script src="http://brangerbriz.net/labs/threejs_playGnd/js/ShaderToon.js"></script>
	<script>

		if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
		
		var camera, scene, renderer;
		var geometry, material, mesh;

		function setup() {

			var W = window.innerWidth, H = window.innerHeight;
			renderer = new THREE.WebGLRenderer();
			renderer.setSize( W, H );
			document.body.appendChild( renderer.domElement );

			camera = new THREE.PerspectiveCamera( 50, W/H, 1, 10000 );
			camera.position.z = 500;

			scene = new THREE.Scene();
			
			
			// paste your code from the geometryGUI here
			geometry = new THREE.CubeGeometry(200, 200, 200);
			material = createShaderMaterial( "dotted", directionalLight, ambientLight );
			material.uniforms.uBaseColor.value.setHex( 0x000000 );
			material.uniforms.uLineColor1.value.setHex( 0xff00ff );
			mesh = new THREE.Mesh(geometry, material);
			scene.add(mesh);

			directionalLight = new THREE.DirectionalLight(0xffffff);
			directionalLight.position.set( 0.96, 1.78, 0 );
			scene.add( directionalLight );

			ambientLight = new THREE.AmbientLight( 0x080808 );
			scene.add( ambientLight );

			

		}
		
		function createShaderMaterial( id, light, ambientLight ) {
				var shader = THREE.ShaderToon[ id ];
				var u = THREE.UniformsUtils.clone( shader.uniforms );
				var vs = shader.vertexShader;
				var fs = shader.fragmentShader;
				var material = new THREE.ShaderMaterial( { uniforms: u, vertexShader: vs, fragmentShader: fs } );
				material.uniforms.uDirLightPos.value = light.position;
				material.uniforms.uDirLightColor.value = light.color;
				material.uniforms.uAmbientLightColor.value = ambientLight.color;
				return material;
			}

		function draw() {

			requestAnimationFrame( draw );
			
			// experiment with code from the snippets menu here

			renderer.render( scene, camera );

		}

		setup();
		draw();

	</script>
	
</body>