From 40bca923c31289f0291cc870001b3cbc58c8a32a Mon Sep 17 00:00:00 2001
From: "Mr.doob" <info@mrdoob.com>
Date: Fri, 7 Oct 2011 19:45:02 +0200
Subject: [PATCH] Added WebGL trails example.

---
 examples/webgl_performance.html |   3 -
 examples/webgl_trails.html      | 120 ++++++++++++++++++++++++++++++++
 2 files changed, 120 insertions(+), 3 deletions(-)
 create mode 100644 examples/webgl_trails.html
diff --git a/examples/webgl_performance.html b/examples/webgl_performance.html
index c96d452005..50d954c4ca 100644
--- a/examples/webgl_performance.html
+++ b/examples/webgl_performance.html
@@ -71,8 +71,6 @@
 						mesh.matrixAutoUpdate = false;
 						mesh.updateMatrix();
 
-						//mesh.frustumCulled = false;
-
 						scene.add( mesh );
 
 					}
@@ -82,7 +80,6 @@
 				renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.sortObjects = false;
-				renderer.autoClearColor = false;
 				container.appendChild( renderer.domElement );
 
 				stats = new Stats();
diff --git a/examples/webgl_trails.html b/examples/webgl_trails.html
new file mode 100644
index 0000000000..dbeb842f51
--- /dev/null
+++ b/examples/webgl_trails.html
@@ -0,0 +1,120 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>three.js webgl - trails</title>
+		<meta charset="utf-8">
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<style>
+			body {
+				background:#000;
+				padding:0;
+				margin:0;
+				font-weight: bold;
+				overflow:hidden;
+			}
+		</style>
+	</head>
+	<body>
+
+		<script src="../build/Three.js"></script>
+
+		<script src="js/RequestAnimationFrame.js"></script>
+		<script src="js/Stats.js"></script>
+
+		<script>
+
+			var container, stats;
+
+			var camera, scene, renderer;
+
+			var mesh, zmesh, lightMesh, geometry;
+
+			var mouseX = 0, mouseY = 0;
+
+			var windowHalfX = window.innerWidth / 2;
+			var windowHalfY = window.innerHeight / 2;
+
+			document.addEventListener( 'mousemove', onDocumentMouseMove, false );
+
+			init();
+			animate();
+
+
+			function init() {
+
+				container = document.createElement( 'div' );
+				document.body.appendChild( container );
+
+				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera.position.x = 100000;
+				camera.position.z = 3200;
+
+				scene = new THREE.Scene();
+
+				var colors = [ 0x000000, 0xff0080, 0x8000ff, 0xffffff ];
+				var geometry = new THREE.Geometry();
+
+				for ( var i = 0; i < 2000; i ++ ) {
+
+					var vertex = new THREE.Vertex();
+					vertex.position.x = Math.random() * 4000 - 2000;
+					vertex.position.y = Math.random() * 4000 - 2000;
+					vertex.position.z = Math.random() * 4000 - 2000;
+					geometry.vertices.push( vertex );
+
+					geometry.colors.push( new THREE.Color( colors[ Math.floor( Math.random() * colors.length ) ] ) );
+
+				}
+
+				var material = new THREE.ParticleBasicMaterial( { size: 1, vertexColors: THREE. VertexColors, depthTest: false, opacity: 0.5, sizeAttenuation: false } );
+
+				var mesh = new THREE.ParticleSystem( geometry, material );
+				scene.add( mesh );
+
+				renderer = new THREE.WebGLRenderer( { preserveDrawingBuffer: true } );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				renderer.sortObjects = false;
+				renderer.autoClearColor = false;
+				container.appendChild( renderer.domElement );
+
+				stats = new Stats();
+				stats.domElement.style.position = 'absolute';
+				stats.domElement.style.top = '0px';
+				stats.domElement.style.zIndex = 100;
+				container.appendChild( stats.domElement );
+
+			}
+
+			function onDocumentMouseMove(event) {
+
+				mouseX = ( event.clientX - windowHalfX ) * 10;
+				mouseY = ( event.clientY - windowHalfY ) * 10;
+
+			}
+
+			//
+
+			function animate() {
+
+				requestAnimationFrame( animate );
+
+				render();
+				stats.update();
+
+			}
+
+			function render() {
+
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
+				camera.position.y += ( - mouseY - camera.position.y ) * .05;
+
+				camera.lookAt( scene.position );
+
+				renderer.render( scene, camera );
+
+			}
+
+		</script>
+
+	</body>
+</html>
-- 
GitLab

