<script type="x-shader/x-vertex" id="shadervertex">
			uniform float radiusX;
			uniform float radiusY;
			uniform float radiusZ;
			uniform float size;
			uniform float scale;
			uniform float height;
			uniform float elapsedTime;
			void main() {
				vec3 pos = position;
				//pos.z += mod(pos.z + elapsedTime *radiusZ, height);
				pos.y += mod(pos.y + elapsedTime *radiusY, height);
				vec4 mvPosition = modelViewMatrix * vec4( pos, 2.0 );
				gl_PointSize = size * ( scale / length( mvPosition.xyz ) );
				gl_Position = projectionMatrix * mvPosition;
			}
		</script>

		<script type="x-shader/x-fragment" id="shaderfragment">
			uniform vec3 color;
			uniform float opacity;
			uniform sampler2D texture;

			void main() {
			        vec4 texColor = texture2D( texture, gl_PointCoord );
			        gl_FragColor = texColor * vec4( color, opacity );
			}
		</script>

<aside class="Signature">
  <p>Codevember #10 - Twindev</p>
  <p>Diana Marchal & Nathalie Marchal</p>
		</aside>
html, body { 
	margin: 0; 
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.Signature {
  position: absolute;
  z-index: 100;
  bottom: 20px;
  right: 20px;
  color: white;
  line-height: .2;
  font-size: .7em;
  font-family: Open Sans, sans-serif;
}
window.onload = function() {
	var renderer,
		scene,
		camera,
		cameraRadius = 100.0,
		cameraTarget,
		cameraX = 0,
		cameraY = 0,
		cameraZ = cameraRadius,
		particleSystem,
		particleSystemHeight = 100.0,
		clock,
		parameters,
		onParametersUpdate,
		mouseX = 0,
		mouseY = 0;

		THREE.ImageUtils.crossOrigin = "anonymous";
		var texture = THREE.ImageUtils.loadTexture( 'http://twin-dev.net/experiments/codevember/maki/ressources/particlelight.png');

	init();
	animate();


	function init() {

		renderer = new THREE.WebGLRenderer();

		renderer.setSize( window.innerWidth, window.innerHeight );
		renderer.setClearColor( new THREE.Color( 0x000000 ) );

		scene = new THREE.Scene();

		camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );

		cameraTarget = new THREE.Vector3( 0, 0, 0 );



		var numParticles = 1000,
			width = 100,
			height = particleSystemHeight,
			depth = 100,
			parameters = {
				color: 0xFFFFFF,
				height: particleSystemHeight,
				radiusX: 2.5,
				radiusY: -4.0,
				radiusZ: 2.5,
				size: 100,
				scale: 8.0
			},
			systemGeometry = new THREE.SphereGeometry(100, 100, 100),
			systemMaterial = new THREE.ShaderMaterial({
				uniforms: {
					color:  { type: 'c', value: new THREE.Color( parameters.color ) },
					height: { type: 'f', value: parameters.height },
					elapsedTime: { type: 'f', value: 0 },
					radiusX: { type: 'f', value: parameters.radiusX },
					radiusY: { type: 'f', value: parameters.radiusY },
					radiusZ: { type: 'f', value: parameters.radiusZ },
					size: { type: 'f', value: parameters.size },
					scale: { type: 'f', value: parameters.scale },
					texture: { type: 't', value: texture }
				},
				vertexShader: document.getElementById( 'shadervertex' ).textContent,
				fragmentShader: document.getElementById( 'shaderfragment' ).textContent,
				blending: THREE.AdditiveBlending,
				depthTest: false
			});
	 
		for( var i = 0; i < numParticles; i++ ) {
			var vertex = new THREE.Vector3(
					rand( width ),
					Math.random() * height,
					rand( depth )
				);

			systemGeometry.vertices.push( vertex );
		}


		particleSystem = new THREE.Points( systemGeometry, systemMaterial );
		particleSystem.position.y = -height/2;

		scene.add( particleSystem );

		clock = new THREE.Clock();

		document.body.appendChild( renderer.domElement );
		

		onParametersUpdate = function( v ) {
			systemMaterial.uniforms.color.value.set( parameters.color );
			systemMaterial.uniforms.height.value = parameters.height;
			systemMaterial.uniforms.radiusX.value = parameters.radiusX;
			systemMaterial.uniforms.radiusY.value = parameters.radiusY;
			systemMaterial.uniforms.radiusZ.value = parameters.radiusZ;
			systemMaterial.uniforms.size.value = parameters.size;
			systemMaterial.uniforms.scale.value = parameters.scale;
		}
		
		document.addEventListener( 'mousemove', function( e ) {
				mouseX = e.clientX;
				mouseY = e.clientY;
				var width = window.innerWidth,
				halfWidth = width >> 1,
				height = window.innerHeight,
				halfHeight = height >> 1;

		}, false );


	}

	function rand( v ) {
		return (v * (Math.random() - 0.5));
	}



	function animate() {

		requestAnimationFrame( animate );

		var delta = clock.getDelta(),
			elapsedTime = clock.getElapsedTime();

		particleSystem.material.uniforms.elapsedTime.value = elapsedTime * 10;

		camera.position.set( cameraX, cameraY, cameraZ );
		camera.lookAt( cameraTarget );

		renderer.clear();
		renderer.render( scene, camera );

	}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/three.js/r73/three.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js