XProfan

// Schneeflocken (als System von Punkten)
        pointCount = 30000;            		 	// Anzahl der Punkte (Schneeflocken)	
        points = new THREE.Geometry();			// eine allgemeine Geometrie fuer die Punkte erzeugen	
	var loader = new THREE.TextureLoader(); // ein Lader fuer die Textur	
	loader.load("schneeflocke.jpg", function(texture){   // Textur laden und damit gleich Punktesystem erzeugen
		pointsMaterial = new THREE.PointsMaterial({ size: 21, color: 0xcccccc, map: texture, transparent: true, opacity: 0.95 });
		for (var p = 0; p < pointCount; p++) { 	 // zufaellige Koordinaten erzeugen
			x = Math.random() * 4000 - 2000;
			y = Math.random() * 2000 -  500;
			z = Math.random() * 2000 - 2000;
			point = new THREE.Vector3(x, y, z); // einzelnen Punkt erzeugen (als Ortsvektor seiner Koordinaten)
			points.vertices.push(point);        // Punkt als Knoten der Punkte-Geometrie hinzufuegen
		}
		// System der Punkte
    	        pointSystem = new THREE.Points(	points,	pointsMaterial); // entsprechend THREE.Mesh bei Koerpern
		// zur Szene hinzufuegen
		scene.add(pointSystem); 
		pointSystem.rotation.x = 0.9;
	});

AUSZUG:  JavaScript

// Punktesystem	
	anzahlPunkte = 600;
	pointsGeometry = new THREE.Geometry();
	for (var i = 0; i < anzahlPunkte ; i++)
		pointsGeometry.vertices.push( new THREE.Vector3(0,0,0) ); // ersteinmal alle Punkte im Ursprung
	texture = THREE.ImageUtils.loadTexture( 'redball.png' );
	pointsMaterial  = new THREE.PointsMaterial({color: 0xeee8aa, size: 50, map: texture,  transparent: true, opacity: 0.7  , alphaTest: 0.5});	
	var pointSystem = new THREE.Points( pointsGeometry, pointsMaterial );
	pointSystem.position.set(0, 85, 0);
	scene.add( pointSystem );

function spirale(a,f,t) {
	return new THREE.Vector3( a*f*t*Math.cos(f*t),  700-2*t,  a*f*t*Math.sin(f*t) );	// x, y, z 			
}
function animate() {
    requestAnimationFrame( animate );
	controls.update();	
	t  = clock.getElapsedTime();                    
	f  = 1.8 - Math.atan(0.5+t);
	if (f>0.25){
		for( var v = 0; v < pointsGeometry.vertices.length; v++ ) {		
			pointsGeometry.vertices[v] = spirale(2, f, t + 1.2*v);      // neue Koordinaten jedes einzelnen Punktes (v)        
		}
		pointsGeometry.verticesNeedUpdate = true;  // zur Aktualisierung der Koordinaten der Punkte notwendig
	}
	camera.position.x =  1800*Math.sin(0.1*t);
	renderer.render( scene, camera );	
}

materialLeitwerk = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide});
leitwerkGeometry = new THREE.Geometry();   // eine allgemeine Geometrie
leitwerkGeometry.vertices = [       // Datenfeld der Knoten, Koordinaten als Ortsvektoren, Index -> Flaechenbildung
  new THREE.Vector3(   0, 10,   0 ), // Knoten  0 oben Mitte
  new THREE.Vector3(  10,  0,   0 ), // Knoten  1 Spitze zu +x
  new THREE.Vector3(   0,  0, -10 ), // Knoten  2 Spitze zu -z
  new THREE.Vector3( -10,  0,   0 ), // Knoten  3 Spitze zu -x
  new THREE.Vector3(   0,  0,  10 ), // Knoten  4 Spitze zu +z
  new THREE.Vector3(   0,  0,   0 ), // Knoten  5 unten Mitte  (alle 4 Knoten mit vorerst identischen Koordinaten)
  new THREE.Vector3(   0,  0,   0 ), // Knoten  6 unten Mitte
  new THREE.Vector3(   0,  0,   0 ), // Knoten  7 unten Mitte
  new THREE.Vector3(   0,  0,   0 ), // Knoten  8 unten Mitte
];    
//leitwerkGeometry.computeVertexNormals();
leitwerkGeometry.faces = [    // Datenfeld der Flaechen (Knotennummern der Ecken des Dreiecks in positivem Drehsinn)
  new THREE.Face3( 0, 5, 1 ),    // Leitflaeche zu +x
  new THREE.Face3( 0, 6, 2 ),    // Leitflaeche zu -z
  new THREE.Face3( 0, 7, 3 ),    // Leitflaeche zu -x
  new THREE.Face3( 0, 8, 4 )     // Leitflaeche zu +z  
];
leitwerkGeometry.computeFaceNormals();  // Berechnung der Normalen (Senkrechte Einheitsvektoren zur Flaeche -> MeshNormalMaterial)
leitwerk = new THREE.Mesh(leitwerkGeometry, materialLeitwerk);
scene.add(leitwerk);

// Paket basteln
	paketGeo = new THREE.Geometry();   // eine allgemeine Geometrie
	paketGeo.vertices = [];     // Datenfeld der Knoten, Koordinaten als Ortsvektoren, Index -> Flaechenbildung
	for(x=-30 ; x<51; x+=20){		 
		paketGeo.vertices.push(new THREE.Vector3(   x, 0,-10 )); // Knoten 0, 2, 4, 6, 8
		paketGeo.vertices.push(new THREE.Vector3(   x, 0, 10 )); // Knoten 1, 3, 5, 7, 9	
	}
		paketGeo.vertices.push(new THREE.Vector3( -10, 0,-30 )); // Knoten 10
		paketGeo.vertices.push(new THREE.Vector3(  10, 0,-30 )); // Knoten 11 
		paketGeo.vertices.push(new THREE.Vector3( -10, 0, 30 )); // Knoten 12
		paketGeo.vertices.push(new THREE.Vector3(  10, 0, 30 )); // Knoten 13
		paketGeo.vertices.push(new THREE.Vector3(  40, 0,  0 )); // Knoten 14  viermal identische Koordinaten
		paketGeo.vertices.push(new THREE.Vector3(  40, 0,  0 )); // Knoten 15
		paketGeo.vertices.push(new THREE.Vector3(  40, 0,  0 )); // Knoten 16
		paketGeo.vertices.push(new THREE.Vector3(  40, 0,  0 )); // Knoten 17		
	paketGeo.computeVertexNormals();

paketGeo.faces = [    // Datenfeld der Flaechen (Knotennummern der Ecken des Dreiecks in positivem Drehsinn von aussen)
		new THREE.Face3(  0,  2,  1 ),    //  0
		new THREE.Face3(  1,  2,  3 ),    //  1
		new THREE.Face3(  2,  4,  3 ),    //  2
		new THREE.Face3(  3,  4,  5 ),    //  3
		new THREE.Face3(  4,  6,  5 ),    //  4
		new THREE.Face3(  5,  6,  7 ),    //  5
		new THREE.Face3( 10, 11,  2 ),    //  6
		new THREE.Face3(  2, 11,  4 ),    //  7
		new THREE.Face3(  3,  5, 12 ),    //  8
		new THREE.Face3( 12,  5, 13 ),    //  9
		new THREE.Face3( 14,  7,  6 ),    // 10 
		new THREE.Face3( 15,  6,  8 ),    // 11 
		new THREE.Face3( 16,  8,  9 ),    // 12 
		new THREE.Face3( 17,  9,  7 )     // 13 	
	];
	paketGeo.computeFaceNormals();  // Berechnung der Normalen (Senkrechte Einheitsvektoren zur Flaeche -> Material)

//Bildboxtextur aus 6 Bildern, zusammenpassend an den Kanten, die Reihenfolge im Datenfeld ist wichtig! 
var textureURLs = [];
textureURLs.push( "cubemap-textures/NissiBeach2/posx.jpg" );  
textureURLs.push( "cubemap-textures/NissiBeach2/negx.jpg" );
textureURLs.push( "cubemap-textures/NissiBeach2/posy.jpg" );
textureURLs.push( "cubemap-textures/NissiBeach2/negy.jpg" );
textureURLs.push( "cubemap-textures/NissiBeach2/posz.jpg" );
textureURLs.push( "cubemap-textures/NissiBeach2/negz.jpg" );
// Textur - Material
skyboxTexture = THREE.ImageUtils.loadTextureCube( textureURLs, THREE.CubeRefractionMapping, render );  
shader = THREE.ShaderLib[ "cube" ]; // enthaelt die benoetigten Shader
shader.uniforms[ "tCube" ].value = skyboxTexture; // Daten fuer die Shader
shMaterial = new THREE.ShaderMaterial( {              
            fragmentShader: shader.fragmentShader, // ShaderMaterial nimmt die benutzerdefinierten Vertex und Fragment Shader
            vertexShader: shader.vertexShader,
            uniforms: shader.uniforms,  // Die Texture ist Teil dieses Objekts
            //depthWrite: false,
            side: THREE.BackSide // Rueckseite, d.h. Innenseite der Box
    } );
// Bildbox ("Himmel")	
skybox = new THREE.Mesh( new THREE.BoxGeometry( 100,100, 100), shMaterial );
scene.add(skybox);

//Linse
var points = []; // Punkte der x-y Ebene, die um die y- Achse rotiert werden
for ( var w = Math.PI; w > 1; w -= 0.02 ) {
    if ( 2*Math.sin( w ) -1.8 >0 ) points.push( new THREE.Vector2( 2*Math.cos(w),   2*Math.sin(w)-1.8  )); // Vector2(x, y)
}
for ( var w = 1; w < Math.PI; w += 0.02 ) {
    if ( 2*Math.sin( w ) -1.8  >0 ) points.push( new THREE.Vector2( 2*Math.cos(w), -(2*Math.sin(w)-1.8) )); //Vector2(x, y)
}	
var geometry = new THREE.LatheGeometry( points, 32 );  // Drehteil (Drehung um y-Achse in Revision 83)
refMaterial = new THREE.MeshBasicMaterial({color: 0xffffff, envMap: skyboxTexture, refractionRatio: 0.8, wireframe:false} ); 
	  	// Refraction (Lichtbrechung) zwischen 0 und 1.              
        // Default fast 1 - nahezu unsichtbares Glas.      
refMaterial.reflectivity = 0.99; // durchgelassener Lichtanteil: 0 undurchsichtig, 1 voll durchlaessig	
lens    = new THREE.Mesh(geometry, refMaterial); 
scene.add(lens);
lens.rotation.x = 1.57;

//GLSL Code aus den Shader Scripts einbinden
vertexShaderCode   =  document.getElementById( 'vertexShader'   ).textContent
fragmentShaderCode =  document.getElementById( 'fragmentShader' ).textContent
    ... usw. ...
WIDTH  = 1200;
HEIGHT =  800;
renderer.setSize(WIDTH,HEIGHT);           // Zeichenflaeche
shaderUniforms = {	
         u_time:       { type:  "f", value: 1.0},                  // "f" float
         u_resolution: { type: "v2", value: new THREE.Vector2() },		  
         u_mouse:      { type: "v2", value: new THREE.Vector2() }
};	
shaderUniforms.u_resolution.value.x = WIDTH;    // = renderer.domElement.width;   //  Wert zum Shader geben 
shaderUniforms.u_resolution.value.y = HEIGHT;   // = renderer.domElement.height;  //  Wert zum Shader geben 
// Material aus dem Shader bilden
shMaterial = new THREE.ShaderMaterial( {
        uniforms: 	shaderUniforms,
        vertexShader:   vertexShaderCode,
        fragmentShader: fragmentShaderCode 
} );

// normalisierte Koordinaten bilden - Achse x, y  zwischen 0.0 und 1.0
// dazu:  Fragment Koordinaten dividiert durch Auflösung der Zeichenfläche (je Achse!)
vec2 s = gl_FragCoord.xy / u_resolution.xy;// s hat die zwei Komponenten x und y
s *= 4.0;// Skalierung auf 0.0 bis 4.0 (je Achse)
s = fract(s);// fract (Nachkommastellen) --> ergibt 4 mal jeweils  0.0 bis 1.0 je Achse
// Farbkomponenten nach umgewandelten x,y Koordinaten, dritter Anteil schwankt mit Zeit:
vec3 c = vec3( s.x, s.y, abs(sin(u_time)) );
// Standardausgabe Fragmentfarbe: gl_FragColor (vordefiniert)
gl_FragColor = vec4( c, 1.0 );// parallele Ausgabe -  Farbe mit Deckkraft: 1.0