Examples: Clean up

examples/webgl_decals.html

@@ -134,7 +134,7 @@
 
 			raycaster = new THREE.Raycaster();
 
-			mouseHelper = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 10 ), new THREE.MeshNormalMaterial() );
+			mouseHelper = new THREE.Mesh( new THREE.BoxBufferGeometry( 1, 1, 10 ), new THREE.MeshNormalMaterial() );
 			mouseHelper.visible = false;
 			scene.add( mouseHelper );
 

examples/webgl_geometry_terrain_raycast.html

@@ -109,13 +109,13 @@
 				mesh = new THREE.Mesh( geometry, new THREE.MeshBasicMaterial( { map: texture } ) );
 				scene.add( mesh );
 
-				var geometry = new THREE.CylinderGeometry( 0, 20, 100, 3 );
+				var geometry = new THREE.ConeBufferGeometry( 20, 100, 3 );
 				geometry.translate( 0, 50, 0 );
 				geometry.rotateX( Math.PI / 2 );
 				helper = new THREE.Mesh( geometry, new THREE.MeshNormalMaterial() );
 				scene.add( helper );
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 

examples/webgl_interactive_draggablecubes.html

@@ -65,7 +65,7 @@
 
 				scene.add( light );
 
-				var geometry = new THREE.BoxGeometry( 40, 40, 40 );
+				var geometry = new THREE.BoxBufferGeometry( 40, 40, 40 );
 
 				for ( var i = 0; i < 200; i ++ ) {
 

examples/webgl_loader_texture_dds.html

@@ -55,7 +55,7 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
+				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 
 				/*
 				This is how compressed textures are supposed to be used:
@@ -118,7 +118,7 @@
 				var material8 = new THREE.MeshBasicMaterial( { map: map6 } );
 
 
-				var mesh = new THREE.Mesh( new THREE.TorusGeometry( 100, 50, 32, 16 ), material1 );
+				var mesh = new THREE.Mesh( new THREE.TorusBufferGeometry( 100, 50, 32, 16 ), material1 );
 				mesh.position.x = -600;
 				mesh.position.y = -200;
 				scene.add( mesh );

examples/webgl_loader_texture_pvrtc.html

@@ -54,24 +54,30 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxGeometry( 200, 200, 200 );
+				var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 
 				//
 
-					var onCube1Loaded = function(texture){
+				var onCube1Loaded = function( texture ){
+
 					texture.magFilter = THREE.LinearFilter;
 					texture.minFilter = THREE.LinearFilter;
 					texture.mapping = THREE.CubeReflectionMapping;
 					material6.needsUpdate = true;
-					};
-					var onCube2Loaded = function(texture){
+
+				};
+
+				var onCube2Loaded = function( texture ){
+
 					texture.magFilter = THREE.LinearFilter;
 					// texture.minFilter = THREE.LinearMipMapNearestFilter;
 					texture.minFilter = THREE.LinearFilter;
 					texture.mapping = THREE.CubeReflectionMapping;
 					material8.needsUpdate = true;
-					};
 
+				};
+
+				//
 
 				var loader = new THREE.PVRLoader();
 
@@ -84,7 +90,6 @@
 				var park3_cube_nomip_4bpp_rgb   = loader.load( 'textures/compressed/park3_cube_nomip_4bpp_rgb.pvr', onCube1Loaded );
 				var park3_cube_mip_2bpp_rgb_v3  = loader.load( 'textures/compressed/park3_cube_mip_2bpp_rgb_v3.pvr', onCube2Loaded );
 
-
 				disturb_2bpp_rgb.minFilter =
 				disturb_2bpp_rgb.magFilter =
 				flare_4bpp_rgba.minFilter  =
@@ -96,16 +101,17 @@
 				flare_2bpp_rgba.minFilter  =
 				flare_2bpp_rgba.magFilter  = THREE.LinearFilter;
 
-				var material1 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb       } );
-				var material2 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb_mips  } );
-				var material3 = new THREE.MeshBasicMaterial( { map: disturb_2bpp_rgb       } );
-				var material4 = new THREE.MeshBasicMaterial( { map: flare_4bpp_rgba       , side: THREE.DoubleSide, depthTest: false, transparent: true } );
-				var material5 = new THREE.MeshBasicMaterial( { map: flare_2bpp_rgba       , side: THREE.DoubleSide, depthTest: false, transparent: true } );
+				var material1 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb } );
+				var material2 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb_mips } );
+				var material3 = new THREE.MeshBasicMaterial( { map: disturb_2bpp_rgb } );
+				var material4 = new THREE.MeshBasicMaterial( { map: flare_4bpp_rgba, side: THREE.DoubleSide, depthTest: false, transparent: true } );
+				var material5 = new THREE.MeshBasicMaterial( { map: flare_2bpp_rgba, side: THREE.DoubleSide, depthTest: false, transparent: true } );
 				var material6 = new THREE.MeshBasicMaterial( { envMap: park3_cube_nomip_4bpp_rgb } );
 				var material8 = new THREE.MeshBasicMaterial( { envMap: park3_cube_mip_2bpp_rgb_v3 } );
 
-				var material7 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb_v3       } );
+				var material7 = new THREE.MeshBasicMaterial( { map: disturb_4bpp_rgb_v3 } );
 
+				//
 
 				var mesh = new THREE.Mesh( geometry, material1 );
 				mesh.position.x = -500;
@@ -143,7 +149,7 @@
 				scene.add( mesh );
 				meshes.push( mesh );
 
-				var torus =  new THREE.TorusGeometry( 100, 50, 32, 24 );
+				var torus =  new THREE.TorusBufferGeometry( 100, 50, 32, 24 );
 
 				mesh = new THREE.Mesh( torus, material6 );
 				mesh.position.x = 166;
@@ -157,7 +163,7 @@
 				scene.add( mesh );
 				meshes.push( mesh );
 
-
+				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );

examples/webgl_lod.html

@@ -84,11 +84,11 @@
 
 				var geometry = [
 
-					[ new THREE.IcosahedronGeometry( 100, 4 ), 50 ],
-					[ new THREE.IcosahedronGeometry( 100, 3 ), 300 ],
-					[ new THREE.IcosahedronGeometry( 100, 2 ), 1000 ],
-					[ new THREE.IcosahedronGeometry( 100, 1 ), 2000 ],
-					[ new THREE.IcosahedronGeometry( 100, 0 ), 8000 ]
+					[ new THREE.IcosahedronBufferGeometry( 100, 4 ), 50 ],
+					[ new THREE.IcosahedronBufferGeometry( 100, 3 ), 300 ],
+					[ new THREE.IcosahedronBufferGeometry( 100, 2 ), 1000 ],
+					[ new THREE.IcosahedronBufferGeometry( 100, 1 ), 2000 ],
+					[ new THREE.IcosahedronBufferGeometry( 100, 0 ), 8000 ]
 
 				];
 
@@ -120,7 +120,7 @@
 				}
 
 
-				renderer = new THREE.WebGLRenderer();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );

examples/webgl_postprocessing_masking.html

@@ -47,10 +47,10 @@
 				var scene1 = new THREE.Scene();
 				var scene2 = new THREE.Scene();
 
-				box = new THREE.Mesh( new THREE.BoxGeometry( 4, 4, 4 ) );
+				box = new THREE.Mesh( new THREE.BoxBufferGeometry( 4, 4, 4 ) );
 				scene1.add( box );
 
-				torus = new THREE.Mesh( new THREE.TorusGeometry( 3, 1, 16, 32 ) );
+				torus = new THREE.Mesh( new THREE.TorusBufferGeometry( 3, 1, 16, 32 ) );
 				scene2.add( torus );
 
 				renderer = new THREE.WebGLRenderer();

examples/webgl_postprocessing_smaa.html

@@ -55,7 +55,7 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxGeometry( 120, 120, 120 );
+				var geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
 				var mesh = new THREE.Mesh( geometry, material );

examples/webgl_postprocessing_ssaa.html

@@ -100,7 +100,7 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxGeometry( 120, 120, 120 );
+				var geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
 				var mesh = new THREE.Mesh( geometry, material );

examples/webgl_postprocessing_ssao.html

@@ -92,7 +92,7 @@
 				group = new THREE.Object3D();
 				scene.add( group );
 
-				var geometry = new THREE.BoxGeometry( 10, 10, 10 );
+				var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
 				for ( var i = 0; i < 200; i ++ ) {
 
 					var material = new THREE.MeshBasicMaterial();
@@ -124,13 +124,9 @@
 				gui.add( postprocessing, 'enabled' );
 
 				gui.add( postprocessing, 'onlyAO', false ).onChange( function( value ) { ssaoPass.onlyAO = value; } );
-
 				gui.add( postprocessing, 'radius' ).min( 0 ).max( 64 ).onChange( function( value ) { ssaoPass.radius = value; } );
-
 				gui.add( postprocessing, 'aoClamp' ).min( 0 ).max( 1 ).onChange( function( value ) { ssaoPass.aoClamp = value; } );
-
 				gui.add( postprocessing, 'lumInfluence' ).min( 0 ).max( 1 ).onChange( function( value ) { ssaoPass.lumInfluence = value; } );
-
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
@@ -155,6 +151,7 @@
 				var newWidth  = Math.floor( width / pixelRatio ) || 1;
 				var newHeight = Math.floor( height / pixelRatio ) || 1;
 				effectComposer.setSize( newWidth, newHeight );
+
 			}
 
 			function initPostprocessing() {

examples/webgl_postprocessing_taa.html

@@ -122,7 +122,7 @@
 
 				scene = new THREE.Scene();
 
-				var geometry = new THREE.BoxGeometry( 120, 120, 120 );
+				var geometry = new THREE.BoxBufferGeometry( 120, 120, 120 );
 				var material = new THREE.MeshBasicMaterial( { color: 0xffffff, wireframe: true } );
 
 				var mesh = new THREE.Mesh( geometry, material );

examples/webgl_read_float_buffer.html

@@ -150,7 +150,7 @@
 				quad.position.z = - 100;
 				sceneRTT.add( quad );
 
-				var geometry = new THREE.TorusGeometry( 100, 25, 15, 30 );
+				var geometry = new THREE.TorusBufferGeometry( 100, 25, 15, 30 );
 
 				var mat1 = new THREE.MeshPhongMaterial( { color: 0x555555, specular: 0xffaa00, shininess: 5 } );
 				var mat2 = new THREE.MeshPhongMaterial( { color: 0x550000, specular: 0xff2200, shininess: 5 } );

examples/webgl_shaders_ocean.html

@@ -144,16 +144,26 @@
 
 				//
 
-				var geometry = new THREE.IcosahedronGeometry( 20, 1 );
+				var geometry = new THREE.IcosahedronBufferGeometry( 20, 1 );
+				var count = geometry.attributes.position.count;
 
-				for ( var i = 0, j = geometry.faces.length; i < j; i ++ ) {
+				var colors = [];
+				var color = new THREE.Color();
 
-					geometry.faces[ i ].color.setHex( Math.random() * 0xffffff );
+				for ( var i = 0; i < count; i += 3 ) {
+
+					color.setHex( Math.random() * 0xffffff );
+
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
+					colors.push( color.r, color.g, color.b );
 
 				}
 
+				geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
+
 				var material = new THREE.MeshStandardMaterial( {
-					vertexColors: THREE.FaceColors,
+					vertexColors: THREE.VertexColors,
 					roughness: 0.0,
 					flatShading: true,
 					envMap: cubeCamera.renderTarget.texture,

examples/webvr_cubes.html

@@ -61,7 +61,7 @@
 				scene.add( camera );
 
 				crosshair = new THREE.Mesh(
-					new THREE.RingGeometry( 0.02, 0.04, 32 ),
+					new THREE.RingBufferGeometry( 0.02, 0.04, 32 ),
 					new THREE.MeshBasicMaterial( {
 						color: 0xffffff,
 						opacity: 0.5,
@@ -72,7 +72,7 @@
 				camera.add( crosshair );
 
 				room = new THREE.Mesh(
-					new THREE.BoxGeometry( 6, 6, 6, 8, 8, 8 ),
+					new THREE.BoxBufferGeometry( 6, 6, 6, 8, 8, 8 ),
 					new THREE.MeshBasicMaterial( { color: 0x404040, wireframe: true } )
 				);
 				room.position.y = 3;
@@ -84,7 +84,7 @@
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new THREE.BoxGeometry( 0.15, 0.15, 0.15 );
+				var geometry = new THREE.BoxBufferGeometry( 0.15, 0.15, 0.15 );
 
 				for ( var i = 0; i < 200; i ++ ) {
 

examples/webvr_daydream.html

@@ -58,7 +58,7 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 
 				room = new THREE.Mesh(
-					new THREE.BoxGeometry( 6, 6, 6, 8, 8, 8 ),
+					new THREE.BoxBufferGeometry( 6, 6, 6, 8, 8, 8 ),
 					new THREE.MeshBasicMaterial( { color: 0x808080, wireframe: true } )
 				);
 				room.position.y = 3;
@@ -70,7 +70,7 @@
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new THREE.IcosahedronGeometry( 0.08, 2 );
+				var geometry = new THREE.IcosahedronBufferGeometry( 0.08, 2 );
 
 				for ( var i = 0; i < 200; i ++ ) {
 

examples/webvr_gearvr.html

@@ -61,7 +61,7 @@
 				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 10 );
 
 				room = new THREE.Mesh(
-					new THREE.BoxGeometry( 6, 6, 6, 8, 8, 8 ),
+					new THREE.BoxBufferGeometry( 6, 6, 6, 8, 8, 8 ),
 					new THREE.MeshBasicMaterial( { color: 0x404040, wireframe: true } )
 				);
 				room.position.y = 3;
@@ -73,7 +73,7 @@
 				light.position.set( 1, 1, 1 ).normalize();
 				scene.add( light );
 
-				var geometry = new THREE.IcosahedronGeometry( 0.08, 2 );
+				var geometry = new THREE.IcosahedronBufferGeometry( 0.08, 2 );
 
 				for ( var i = 0; i < 200; i ++ ) {
 

examples/webvr_sandbox.html

@@ -43,7 +43,7 @@
 
 				camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.1, 10 );
 
-				var geometry = new THREE.TorusKnotGeometry( 0.4, 0.15, 150, 20 );
+				var geometry = new THREE.TorusKnotBufferGeometry( 0.4, 0.15, 150, 20 );
 				var material = new THREE.MeshStandardMaterial( { roughness: 0.01, metalness: 0.2, envMap: background } );
 				var mesh = new THREE.Mesh( geometry, material );
 				mesh.position.y = 0.75;
@@ -52,7 +52,7 @@
 				mesh.receiveShadow = true;
 				scene.add( mesh );
 
-				var geometry = new THREE.BoxGeometry( 1.5, 0.1, 1.5 );
+				var geometry = new THREE.BoxBufferGeometry( 1.5, 0.1, 1.5 );
 				var material = new THREE.MeshPhongMaterial();
 				var mesh = new THREE.Mesh( geometry, material );
 				mesh.position.y = - 0.2;
@@ -110,7 +110,7 @@
 				reflector.rotation.y = - Math.PI / 4;
 				scene.add( reflector );
 
-				var geometry = new THREE.BoxGeometry( 1.5, 1.5, 0.1 );
+				var geometry = new THREE.BoxBufferGeometry( 1.5, 1.5, 0.1 );
 				var material = new THREE.MeshPhongMaterial();
 				var mesh = new THREE.Mesh( geometry, material );
 				mesh.position.z = - 0.07;