Examples: Clean up

examples/js/pmrem/PMREMGenerator.js

@@ -53,7 +53,7 @@ THREE.PMREMGenerator = function ( sourceTexture, samplesPerLevel, resolution ) {
 
 	this.shader = this.getShader();
 	this.shader.defines[ 'SAMPLES_PER_LEVEL' ] = this.samplesPerLevel;
-	this.planeMesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2, 0 ), this.shader );
+	this.planeMesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2, 0 ), this.shader );
 	this.planeMesh.material.side = THREE.DoubleSide;
 	this.scene = new THREE.Scene();
 	this.scene.add( this.planeMesh );

examples/webgl_loader_texture_ktx.html

@@ -82,7 +82,7 @@
 
 		scene = new THREE.Scene();
 
-		var geometry = new THREE.BoxGeometry( 200, 200, 200 );
+		var geometry = new THREE.BoxBufferGeometry( 200, 200, 200 );
 		var material1, material2;
 
 		// TODO: add cubemap support

examples/webgl_materials_parallaxmap.html

@@ -56,10 +56,10 @@
 		<script src="js/shaders/ParallaxShader.js"></script>
 
 		<script>
+
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
-			var stats;
-			var camera, scene, material, renderer;
+			var camera, scene, material, renderer, stats;
 
 			var effectController = {
 				'mode': 'relief',
@@ -81,7 +81,35 @@
 				camera.position.z = 2;
 				scene = new THREE.Scene();
 
-				initScene();
+				//
+
+				var shader = THREE.ParallaxShader;
+				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
+				var parameters = {
+					fragmentShader: shader.fragmentShader,
+					vertexShader: shader.vertexShader,
+					uniforms: uniforms
+				};
+
+				//
+
+				var textureLoader = new THREE.TextureLoader();
+
+				material = new THREE.ShaderMaterial( parameters );
+				material.map = textureLoader.load( 'textures/brick_diffuse.jpg' );
+				material.bumpMap = textureLoader.load( 'textures/brick_bump.jpg' );
+				material.map.anisotropy = 4;
+				material.bumpMap.anisotropy = 4;
+				uniforms[ 'map' ].value = material.map;
+				uniforms[ 'bumpMap' ].value = material.bumpMap;
+
+				//
+
+				var geometry = new THREE.BoxBufferGeometry( 1.0, 1.0, 1.0 );
+				var mesh = new THREE.Mesh( geometry, material );
+				scene.add( mesh );
+
+				//
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
@@ -91,11 +119,17 @@
 				renderer.gammaInput = true;
 				renderer.gammaOutput = true;
 
+				//
+
 				var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
+				//
+
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
+				//
+
 				window.addEventListener( 'resize', onWindowResize, false );
 
 			}
@@ -124,6 +158,7 @@
 				gui.add( effectController, 'maxLayers', 1.0, 30, 1 ).onChange( guiChanged );
 
 				guiChanged();
+
 			}
 
 			function onWindowResize() {
@@ -135,32 +170,6 @@
 
 			}
 
-			function initScene() {
-
-				var shader = THREE.ParallaxShader;
-				var uniforms = THREE.UniformsUtils.clone( shader.uniforms );
-				var parameters = {
-					fragmentShader: shader.fragmentShader,
-					vertexShader: shader.vertexShader,
-					uniforms: uniforms
-				};
-
-				var textureLoader = new THREE.TextureLoader();
-
-				material = new THREE.ShaderMaterial( parameters );
-				material.map = textureLoader.load( 'textures/brick_diffuse.jpg' );
-				material.bumpMap = textureLoader.load( 'textures/brick_bump.jpg' );
-				material.map.anisotropy = 4;
-				material.bumpMap.anisotropy = 4;
-				uniforms[ 'map' ].value = material.map;
-				uniforms[ 'bumpMap' ].value = material.bumpMap;
-
-				var geometry = new THREE.BoxGeometry( 1.0, 1.0, 1.0 );
-				var mesh = new THREE.Mesh( geometry, material );
-				scene.add( mesh );
-
-			}
-
 			function animate() {
 
 				requestAnimationFrame( animate );
@@ -175,6 +184,7 @@
 				renderer.render( scene, camera );
 
 			}
+
 		</script>
 
 	</body>

examples/webgl_materials_texture_canvas.html

@@ -67,7 +67,7 @@
 
 				material = new THREE.MeshBasicMaterial();
 
-				mesh = new THREE.Mesh( new THREE.BoxGeometry( 200, 200, 200 ), material );
+				mesh = new THREE.Mesh( new THREE.BoxBufferGeometry( 200, 200, 200 ), material );
 				scene.add( mesh );
 
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
@@ -79,42 +79,53 @@
 
 			}
 
-			// Sets up the drawing canvas and adds it as the material map.
+			// Sets up the drawing canvas and adds it as the material map
+
 			function setupCanvasDrawing() {
+
 				// get canvas and context
+
 				var drawingCanvas = document.getElementById( 'drawing-canvas' );
 				var drawingContext = drawingCanvas.getContext( '2d' );
 
 				// draw white background
-				drawingContext.fillStyle = "#FFFFFF";
+
+				drawingContext.fillStyle = '#FFFFFF';
 				drawingContext.fillRect( 0, 0, 128, 128 );
 
 				// set canvas as material.map (this could be done to any map, bump, displacement etc.)
+
 				material.map = new THREE.Texture( drawingCanvas );
-				// need to flag the map as needing updating.
 				material.map.needsUpdate = true;
 
 				// set the variable to keep track of when to draw
+
 				var paint = false;
 
 				// add canvas event listeners
 				drawingCanvas.addEventListener( 'mousedown', function( e ) {
+
 					paint = true;
 					drawStartPos.set( e.offsetX, e.offsetY );
+
 				} );
 
 				drawingCanvas.addEventListener( 'mousemove', function( e ) {
-					if(paint){
-						draw( drawingContext, e.offsetX, e.offsetY );
-					}
+
+					if( paint ) draw( drawingContext, e.offsetX, e.offsetY );
+
 				} );
 
 				drawingCanvas.addEventListener( 'mouseup', function( e ) {
+
 					paint = false;
+
 				} );
 
 				drawingCanvas.addEventListener( 'mouseleave', function( e ) {
+
 					paint = false;
+
 				} );
 
 			}

examples/webgl_materials_texture_rotation.html

@@ -82,7 +82,7 @@
 				controls.maxDistance = 50;
 				controls.maxPolarAngle = Math.PI / 2;
 
-				var geometry = new THREE.BoxGeometry( 10, 10, 10 );
+				var geometry = new THREE.BoxBufferGeometry( 10, 10, 10 );
 
 				var loader = new THREE.TextureLoader();
 				var texture = loader.load( 'textures/UV_Grid_Sm.jpg', render );

examples/webgl_materials_video.html

@@ -131,7 +131,7 @@
 					ox = i;
 					oy = j;
 
-					geometry = new THREE.BoxGeometry( xsize, ysize, xsize );
+					geometry = new THREE.BoxBufferGeometry( xsize, ysize, xsize );
 
 					change_uvs( geometry, ux, uy, ox, oy );
 
@@ -202,20 +202,12 @@
 
 			function change_uvs( geometry, unitx, unity, offsetx, offsety ) {
 
-				var faceVertexUvs = geometry.faceVertexUvs[ 0 ];
+				var uvs = geometry.attributes.uv.array;
 
-				for ( var i = 0; i < faceVertexUvs.length; i ++ ) {
+				for ( var i = 0; i < uvs.length; i += 2 ) {
 
-					var uvs = faceVertexUvs[ i ];
-
-					for ( var j = 0; j < uvs.length; j ++ ) {
-
-						var uv = uvs[ j ];
-
-						uv.x = ( uv.x + offsetx ) * unitx;
-						uv.y = ( uv.y + offsety ) * unity;
-
-					}
+					uvs[ i ] = ( uvs[ i ] + offsetx ) * unitx;
+					uvs[ i + 1 ] = ( uvs[ i + 1 ] + offsety ) * unity;
 
 				}
 

examples/webgl_postprocessing_unreal_bloom.html

@@ -105,7 +105,7 @@
 					metalness: 1.0
 				} );
 
-				var geometry = new THREE.TorusKnotGeometry( 18, 8, 150, 20 );
+				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
 				var torusMesh1 = new THREE.Mesh( geometry, standardMaterial );
 				torusMesh1.position.x = 0.0;
 				torusMesh1.castShadow = true;