Examples: Clean up

examples/webgl_points_billboards.html

@@ -45,8 +45,7 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
-			var camera, scene, renderer, particles, geometry, material, i, h, color, sprite, size;
+			var camera, scene, renderer, stats, material;
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -57,34 +56,33 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 2, 2000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.001 );
 
-				geometry = new THREE.Geometry();
+				var geometry = new THREE.BufferGeometry();
+				var vertices = [];
 
-				sprite = new THREE.TextureLoader().load( "textures/sprites/disc.png" );
+				var sprite = new THREE.TextureLoader().load( 'textures/sprites/disc.png' );
 
-				for ( i = 0; i < 10000; i ++ ) {
+				for ( var i = 0; i < 10000; i ++ ) {
 
-					var vertex = new THREE.Vector3();
-					vertex.x = 2000 * Math.random() - 1000;
-					vertex.y = 2000 * Math.random() - 1000;
-					vertex.z = 2000 * Math.random() - 1000;
+					var x = 2000 * Math.random() - 1000;
+					var y = 2000 * Math.random() - 1000;
+					var z = 2000 * Math.random() - 1000;
 
-					geometry.vertices.push( vertex );
+					vertices.push( x, y, z );
 
 				}
 
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+
 				material = new THREE.PointsMaterial( { size: 35, sizeAttenuation: false, map: sprite, alphaTest: 0.5, transparent: true } );
 				material.color.setHSL( 1.0, 0.3, 0.7 );
 
-				particles = new THREE.Points( geometry, material );
+				var particles = new THREE.Points( geometry, material );
 				scene.add( particles );
 
 				//
@@ -92,12 +90,12 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				document.body.appendChild( renderer.domElement );
 
 				//
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				//
 
@@ -175,7 +173,7 @@
 
 				camera.lookAt( scene.position );
 
-				h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
+				var h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
 				material.color.setHSL( h, 0.5, 0.5 );
 
 				renderer.render( scene, camera );

examples/webgl_points_billboards_colors.html

@@ -45,8 +45,7 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
-			var camera, scene, renderer, particles, geometry, material, i, h, color, colors = [], sprite, size;
+			var camera, scene, renderer, stats, material;
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -57,39 +56,41 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 1400;
 
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0009 );
 
-				geometry = new THREE.Geometry();
+				var geometry = new THREE.BufferGeometry();
+				var vertices = [];
+				var colors = [];
+
+				var sprite = new THREE.TextureLoader().load( 'textures/sprites/ball.png' );
 
-				sprite = new THREE.TextureLoader().load( "textures/sprites/ball.png" );
+				var color = new THREE.Color();
 
-				for ( i = 0; i < 5000; i ++ ) {
+				for ( var i = 0; i < 5000; i ++ ) {
 
-					var vertex = new THREE.Vector3();
-					vertex.x = 2000 * Math.random() - 1000;
-					vertex.y = 2000 * Math.random() - 1000;
-					vertex.z = 2000 * Math.random() - 1000;
+					var x = 2000 * Math.random() - 1000;
+					var y = 2000 * Math.random() - 1000;
+					var z = 2000 * Math.random() - 1000;
 
-					geometry.vertices.push( vertex );
+					color.setHSL( ( x + 1000 ) / 2000, 1, 0.5 );
 
-					colors[ i ] = new THREE.Color( 0xffffff );
-					colors[ i ].setHSL( ( vertex.x + 1000 ) / 2000, 1, 0.5 );
+					vertices.push( x, y, z );
+					colors.push( color.r, color.g, color.b );
 
 				}
 
-				geometry.colors = colors;
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+
 
 				material = new THREE.PointsMaterial( { size: 85, map: sprite, vertexColors: THREE.VertexColors, alphaTest: 0.5, transparent: true } );
 				material.color.setHSL( 1.0, 0.2, 0.7 );
 
-				particles = new THREE.Points( geometry, material );
+				var particles = new THREE.Points( geometry, material );
 				scene.add( particles );
 
 				//
@@ -97,12 +98,12 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				document.body.appendChild( renderer.domElement );
 
 				//
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				//
 
@@ -180,7 +181,7 @@
 
 				camera.lookAt( scene.position );
 
-				h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
+				var h = ( 360 * ( 1.0 + time ) % 360 ) / 360;
 				material.color.setHSL( h, 1.0, 0.6 );
 
 				renderer.render( scene, camera );

examples/webgl_points_random.html

@@ -45,8 +45,7 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
-			var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, size;
+			var camera, scene, renderer, stats, materials = [], parameters;
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -57,44 +56,43 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0007 );
 
-				geometry = new THREE.Geometry();
+				var geometry = new THREE.BufferGeometry();
+
+				var vertices = [];
 
-				for ( i = 0; i < 20000; i ++ ) {
+				for ( var i = 0; i < 20000; i ++ ) {
 
-					var vertex = new THREE.Vector3();
-					vertex.x = Math.random() * 2000 - 1000;
-					vertex.y = Math.random() * 2000 - 1000;
-					vertex.z = Math.random() * 2000 - 1000;
+					var x = Math.random() * 2000 - 1000;
+					var y = Math.random() * 2000 - 1000;
+					var z = Math.random() * 2000 - 1000;
 
-					geometry.vertices.push( vertex );
+					vertices.push( x, y, z );
 
 				}
 
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+
 				parameters = [
-					[ [1, 1, 0.5], 5 ],
-					[ [0.95, 1, 0.5], 4 ],
-					[ [0.90, 1, 0.5], 3 ],
-					[ [0.85, 1, 0.5], 2 ],
-					[ [0.80, 1, 0.5], 1 ]
+					[ [ 1, 1, 0.5 ], 5 ],
+					[ [ 0.95, 1, 0.5 ], 4 ],
+					[ [ 0.90, 1, 0.5 ], 3 ],
+					[ [ 0.85, 1, 0.5 ], 2 ],
+					[ [ 0.80, 1, 0.5 ], 1 ]
 				];
 
-				for ( i = 0; i < parameters.length; i ++ ) {
+				for ( var i = 0; i < parameters.length; i ++ ) {
 
-					color = parameters[i][0];
-					size  = parameters[i][1];
+					var size  = parameters[ i ][ 1 ];
 
-					materials[i] = new THREE.PointsMaterial( { size: size } );
+					materials[ i ] = new THREE.PointsMaterial( { size: size } );
 
-					particles = new THREE.Points( geometry, materials[i] );
+					var particles = new THREE.Points( geometry, materials[ i ] );
 
 					particles.rotation.x = Math.random() * 6;
 					particles.rotation.y = Math.random() * 6;
@@ -107,10 +105,10 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
@@ -187,7 +185,7 @@
 
 				camera.lookAt( scene.position );
 
-				for ( i = 0; i < scene.children.length; i ++ ) {
+				for ( var i = 0; i < scene.children.length; i ++ ) {
 
 					var object = scene.children[ i ];
 
@@ -199,12 +197,12 @@
 
 				}
 
-				for ( i = 0; i < materials.length; i ++ ) {
+				for ( var i = 0; i < materials.length; i ++ ) {
 
-					color = parameters[i][0];
+					var color = parameters[ i ][ 0 ];
 
-					h = ( 360 * ( color[0] + time ) % 360 ) / 360;
-					materials[i].color.setHSL( h, color[1], color[2] );
+					var h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
+					materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] );
 
 				}
 

examples/webgl_points_sprites.html

@@ -46,8 +46,7 @@
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var container, stats;
-			var camera, scene, renderer, particles, geometry, materials = [], parameters, i, h, color, sprite, size;
+			var camera, scene, renderer, stats, materials = [], parameters;
 			var mouseX = 0, mouseY = 0;
 
 			var windowHalfX = window.innerWidth / 2;
@@ -58,54 +57,53 @@
 
 			function init() {
 
-				container = document.createElement( 'div' );
-				document.body.appendChild( container );
-
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 2000 );
 				camera.position.z = 1000;
 
 				scene = new THREE.Scene();
 				scene.fog = new THREE.FogExp2( 0x000000, 0.0008 );
 
-				geometry = new THREE.Geometry();
+				var geometry = new THREE.BufferGeometry();
+				var vertices = [];
 
 				var textureLoader = new THREE.TextureLoader();
 
-				var sprite1 = textureLoader.load( "textures/sprites/snowflake1.png" );
-				var sprite2 = textureLoader.load( "textures/sprites/snowflake2.png" );
-				var sprite3 = textureLoader.load( "textures/sprites/snowflake3.png" );
-				var sprite4 = textureLoader.load( "textures/sprites/snowflake4.png" );
-				var sprite5 = textureLoader.load( "textures/sprites/snowflake5.png" );
+				var sprite1 = textureLoader.load( 'textures/sprites/snowflake1.png' );
+				var sprite2 = textureLoader.load( 'textures/sprites/snowflake2.png' );
+				var sprite3 = textureLoader.load( 'textures/sprites/snowflake3.png' );
+				var sprite4 = textureLoader.load( 'textures/sprites/snowflake4.png' );
+				var sprite5 = textureLoader.load( 'textures/sprites/snowflake5.png' );
 
 				for ( i = 0; i < 10000; i ++ ) {
 
-					var vertex = new THREE.Vector3();
-					vertex.x = Math.random() * 2000 - 1000;
-					vertex.y = Math.random() * 2000 - 1000;
-					vertex.z = Math.random() * 2000 - 1000;
+					var x = Math.random() * 2000 - 1000;
+					var y = Math.random() * 2000 - 1000;
+					var z = Math.random() * 2000 - 1000;
 
-					geometry.vertices.push( vertex );
+					vertices.push( x, y, z );
 
 				}
 
+				geometry.addAttribute( 'position', new THREE.Float32BufferAttribute( vertices, 3 ) );
+
 				parameters = [
-					[ [1.0, 0.2, 0.5], sprite2, 20 ],
-					[ [0.95, 0.1, 0.5], sprite3, 15 ],
-					[ [0.90, 0.05, 0.5], sprite1, 10 ],
-					[ [0.85, 0, 0.5], sprite5, 8 ],
-					[ [0.80, 0, 0.5], sprite4, 5 ]
+					[ [ 1.0, 0.2, 0.5 ], sprite2, 20 ],
+					[ [ 0.95, 0.1, 0.5 ], sprite3, 15 ],
+					[ [ 0.90, 0.05, 0.5 ], sprite1, 10 ],
+					[ [ 0.85, 0, 0.5 ], sprite5, 8 ],
+					[ [ 0.80, 0, 0.5 ], sprite4, 5 ]
 				];
 
-				for ( i = 0; i < parameters.length; i ++ ) {
+				for ( var i = 0; i < parameters.length; i ++ ) {
 
-					color  = parameters[i][0];
-					sprite = parameters[i][1];
-					size   = parameters[i][2];
+					var color  = parameters[ i ][ 0 ];
+					var sprite = parameters[ i ][ 1 ];
+					var size   = parameters[ i ][ 2 ];
 
-					materials[i] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
-					materials[i].color.setHSL( color[0], color[1], color[2] );
+					materials[ i ] = new THREE.PointsMaterial( { size: size, map: sprite, blending: THREE.AdditiveBlending, depthTest: false, transparent : true } );
+					materials[ i ].color.setHSL( color[ 0 ], color[ 1 ], color[ 2 ] );
 
-					particles = new THREE.Points( geometry, materials[i] );
+					var particles = new THREE.Points( geometry, materials[i] );
 
 					particles.rotation.x = Math.random() * 6;
 					particles.rotation.y = Math.random() * 6;
@@ -118,10 +116,10 @@
 				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();
-				container.appendChild( stats.dom );
+				document.body.appendChild( stats.dom );
 
 				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
@@ -198,7 +196,7 @@
 
 				camera.lookAt( scene.position );
 
-				for ( i = 0; i < scene.children.length; i ++ ) {
+				for ( var i = 0; i < scene.children.length; i ++ ) {
 
 					var object = scene.children[ i ];
 
@@ -210,12 +208,12 @@
 
 				}
 
-				for ( i = 0; i < materials.length; i ++ ) {
+				for ( var i = 0; i < materials.length; i ++ ) {
 
-					color = parameters[i][0];
+					var color = parameters[ i ][ 0 ];
 
-					h = ( 360 * ( color[0] + time ) % 360 ) / 360;
-					materials[i].color.setHSL( h, color[1], color[2] );
+					var h = ( 360 * ( color[ 0 ] + time ) % 360 ) / 360;
+					materials[ i ].color.setHSL( h, color[ 1 ], color[ 2 ] );
 
 				}