Merge pull request #14537 from WestLangley/dev-to_buffer_geometry_2

Examples: more  Geometry -> BufferGeometry

examples/webgl_geometry_colors.html

@@ -108,54 +108,48 @@
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				var faceIndices = [ 'a', 'b', 'c' ];
+				var radius = 200;
 
-				var color, f, f2, f3, p, vertexIndex,
+				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-					radius = 200,
+				var count = geometry1.attributes.position.count;
+				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-					geometry  = new THREE.IcosahedronGeometry( radius, 1 ),
-					geometry2 = new THREE.IcosahedronGeometry( radius, 1 ),
-					geometry3 = new THREE.IcosahedronGeometry( radius, 1 );
+				geometry2 = geometry1.clone();
+				geometry3 = geometry1.clone();
 
-				for ( var i = 0; i < geometry.faces.length; i ++ ) {
+				var color = new THREE.Color();
+				var positions1 = geometry1.attributes.position;
+				var positions2 = geometry2.attributes.position;
+				var positions3 = geometry3.attributes.position;
+				var colors1 = geometry1.attributes.color;
+				var colors2 = geometry2.attributes.color;
+				var colors3 = geometry3.attributes.color;
 
-					f  = geometry.faces[ i ];
-					f2 = geometry2.faces[ i ];
-					f3 = geometry3.faces[ i ];
+				for ( var i = 0; i < count; i ++ ) {
 
-					for ( var j = 0; j < 3; j ++ ) {
+					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
+					colors1.setXYZ( i, color.r, color.g, color.b );
 
-						vertexIndex = f[ faceIndices[ j ] ];
+					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
+					colors2.setXYZ( i, color.r, color.g, color.b );
 
-						p = geometry.vertices[ vertexIndex ];
-
-						color = new THREE.Color( 0xffffff );
-						color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
-
-						f.vertexColors[ j ] = color;
-
-						color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
-
-						f2.vertexColors[ j ] = color;
-
-						color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.125 * vertexIndex / geometry.vertices.length, 1.0, 0.5 );
-
-						f3.vertexColors[ j ] = color;
-
-					}
+					color.setRGB( 1, 1, ( positions3.getY( i ) / radius + 1 ) / 2 );
+					colors3.setXYZ( i, color.r, color.g, color.b );
 
 				}
 
-				var mesh, wireframe;
+				var material = new THREE.MeshPhongMaterial( {
+					color: 0xffffff,
+					flatShading: true,
+					vertexColors: THREE.VertexColors,
+					shininess: 0
+				} );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
 				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-				mesh = new THREE.Mesh( geometry, material );
-				wireframe = new THREE.Mesh( geometry, wireframeMaterial );
+				mesh = new THREE.Mesh( geometry1, material );
+				wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = - 400;
 				mesh.rotation.x = - 1.87;

examples/webgl_multiple_canvases_circle.html

@@ -209,8 +209,8 @@
 				var fudge = 0.45; // I don't know why this is needed :-(
 				var rot = 30 * THREE.Math.DEG2RAD;
 
-				views.push( new View( canvas1, rot * -2 * fudge ) );
-				views.push( new View( canvas2, rot * -1 * fudge ) );
+				views.push( new View( canvas1, rot * - 2 * fudge ) );
+				views.push( new View( canvas2, rot * - 1 * fudge ) );
 				views.push( new View( canvas3, rot *	0 * fudge ) );
 				views.push( new View( canvas4, rot *	1 * fudge ) );
 				views.push( new View( canvas5, rot *	2 * fudge ) );
@@ -248,42 +248,39 @@
 				for ( var i = 0; i < noof_balls; i ++ ) { // create shadows
 
 					var shadowMesh = new THREE.Mesh( shadowGeo, shadowMaterial );
-					shadowMesh.position.x = - ( noof_balls - 1 ) / 2 *400 + i * 400;
+					shadowMesh.position.x = - ( noof_balls - 1 ) / 2 * 400 + i * 400;
 					shadowMesh.position.y = - 250;
 					shadowMesh.rotation.x = - Math.PI / 2;
 					scene.add( shadowMesh );
 
 				}
 
-				var faceIndices = [ 'a', 'b', 'c' ];
+				var radius = 200;
 
-				var radius = 200,
+				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-				geometry1 = new THREE.IcosahedronGeometry( radius, 1 );
+				var count = geometry1.attributes.position.count;
+				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-				for ( var i = 0; i < geometry1.faces.length; i ++ ) {
+				var color = new THREE.Color();
+				var positions = geometry1.attributes.position;
+				var colors = geometry1.attributes.color;
 
-					var f1 = geometry1.faces[ i ];
+				for ( var i = 0; i < count; i ++ ) {
 
-					for( var j = 0; j < 3; j ++ ) {
+					color.setHSL( ( positions.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
 
-						var vertexIndex = f1[ faceIndices[ j ] ];
-
-						var p = geometry1.vertices[ vertexIndex ];
-
-						var color = new THREE.Color( 0xffffff );
-						color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
-
-						f1.vertexColors[ j ] = color;
-
-						var color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
-
-					}
+					colors.setXYZ( i, color.r, color.g, color.b );
 
 				}
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
+				var material = new THREE.MeshPhongMaterial( {
+					color: 0xffffff,
+					flatShading: true,
+					vertexColors: THREE.VertexColors,
+					shininess: 0
+				} );
+
 				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
 				for ( var i = 0; i < noof_balls; i ++ ) { // create balls
@@ -292,7 +289,7 @@
 					var wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 					mesh.add( wireframe );
 
-					mesh.position.x = - ( noof_balls - 1 ) / 2 *400 + i *400;
+					mesh.position.x = - ( noof_balls - 1 ) / 2 * 400 + i * 400;
 					mesh.rotation.x = i * 0.5;
 					scene.add( mesh );
 
@@ -306,7 +303,7 @@
 
 			}
 
-			function onDocumentMouseMove ( event ) {
+			function onDocumentMouseMove( event ) {
 
 				mouseX = event.clientX - windowHalfX;
 				mouseY = event.clientY - windowHalfY;

examples/webgl_multiple_canvases_complex.html

@@ -170,50 +170,48 @@
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				var faceIndices = [ 'a', 'b', 'c' ];
+				var radius = 200;
 
-				var radius = 200,
+				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-					geometry1 = new THREE.IcosahedronGeometry( radius, 1 ),
-					geometry2 = new THREE.IcosahedronGeometry( radius, 1 ),
-					geometry3 = new THREE.IcosahedronGeometry( radius, 1 );
+				var count = geometry1.attributes.position.count;
+				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-				for ( var i = 0; i < geometry1.faces.length; i ++ ) {
+				geometry2 = geometry1.clone();
+				geometry3 = geometry1.clone();
 
-					var f1 = geometry1.faces[ i ];
-					var f2 = geometry2.faces[ i ];
-					var f3 = geometry3.faces[ i ];
+				var color = new THREE.Color();
+				var positions1 = geometry1.attributes.position;
+				var positions2 = geometry2.attributes.position;
+				var positions3 = geometry3.attributes.position;
+				var colors1 = geometry1.attributes.color;
+				var colors2 = geometry2.attributes.color;
+				var colors3 = geometry3.attributes.color;
 
-					for ( var j = 0; j < 3; j ++ ) {
+				for ( var i = 0; i < count; i ++ ) {
 
-						var vertexIndex = f1[ faceIndices[ j ] ];
+					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
+					colors1.setXYZ( i, color.r, color.g, color.b );
 
-						var p = geometry1.vertices[ vertexIndex ];
+					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
+					colors2.setXYZ( i, color.r, color.g, color.b );
 
-						var color = new THREE.Color( 0xffffff );
-						color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
-
-						f1.vertexColors[ j ] = color;
-
-						var color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
-
-						f2.vertexColors[ j ] = color;
-
-						var color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.125 * vertexIndex / geometry1.vertices.length, 1.0, 0.5 );
-
-						f3.vertexColors[ j ] = color;
-
-					}
+					color.setRGB( 1, 1, ( positions3.getY( i ) / radius + 1 ) / 2 );
+					colors3.setXYZ( i, color.r, color.g, color.b );
 
 				}
 
-				var mesh, wireframe;
+				var material = new THREE.MeshPhongMaterial( {
+					color: 0xffffff,
+					flatShading: true,
+					vertexColors: THREE.VertexColors,
+					shininess: 0
+				} );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
 				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
+				var mesh, wireframe;
+
 				mesh = new THREE.Mesh( geometry1, material );
 				wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 				mesh.add( wireframe );

examples/webgl_multiple_canvases_grid.html

@@ -188,48 +188,44 @@
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				var faceIndices = [ 'a', 'b', 'c' ];
+				var radius = 200;
 
-				var radius = 200,
+				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-					geometry1 = new THREE.IcosahedronGeometry( radius, 1 ),
-					geometry2 = new THREE.IcosahedronGeometry( radius, 1 ),
-					geometry3 = new THREE.IcosahedronGeometry( radius, 1 );
+				var count = geometry1.attributes.position.count;
+				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-				for ( var i = 0; i < geometry1.faces.length; i ++ ) {
+				geometry2 = geometry1.clone();
+				geometry3 = geometry1.clone();
 
-					var f1 = geometry1.faces[ i ];
-					var f2 = geometry2.faces[ i ];
-					var f3 = geometry3.faces[ i ];
+				var color = new THREE.Color();
+				var positions1 = geometry1.attributes.position;
+				var positions2 = geometry2.attributes.position;
+				var positions3 = geometry3.attributes.position;
+				var colors1 = geometry1.attributes.color;
+				var colors2 = geometry2.attributes.color;
+				var colors3 = geometry3.attributes.color;
 
-					for ( var j = 0; j < 3; j ++ ) {
+				for ( var i = 0; i < count; i ++ ) {
 
-						var vertexIndex = f1[ faceIndices[ j ] ];
+					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
+					colors1.setXYZ( i, color.r, color.g, color.b );
 
-						var p = geometry1.vertices[ vertexIndex ];
+					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
+					colors2.setXYZ( i, color.r, color.g, color.b );
 
-						var color = new THREE.Color( 0xffffff );
-						color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
-
-						f1.vertexColors[ j ] = color;
-
-						var color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
-
-						f2.vertexColors[ j ] = color;
-
-						var color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.125 * vertexIndex / geometry1.vertices.length, 1.0, 0.5 );
-
-						f3.vertexColors[ j ] = color;
-
-					}
+					color.setRGB( 1, 1, ( positions3.getY( i ) / radius + 1 ) / 2 );
+					colors3.setXYZ( i, color.r, color.g, color.b );
 
 				}
 
-				var mesh, wireframe;
+				var material = new THREE.MeshPhongMaterial( {
+					color: 0xffffff,
+					flatShading: true,
+					vertexColors: THREE.VertexColors,
+					shininess: 0
+				} );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
 				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
 				mesh = new THREE.Mesh( geometry1, material );

examples/webgl_multiple_renderers.html

@@ -44,6 +44,8 @@
 			var camera, scene, renderer1, renderer2;
 
 			var mesh1, mesh2, mesh3;
+			var color = new THREE.Color();
+			var vec = new THREE.Vector3();
 
 			init();
 			animate();
@@ -101,50 +103,43 @@
 				shadowMesh.rotation.x = - Math.PI / 2;
 				scene.add( shadowMesh );
 
-				var faceIndices = [ 'a', 'b', 'c' ];
+				var radius = 200;
 
-				var color, f1, f2, f3, p, vertexIndex,
+				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-					radius = 200,
+				var count = geometry1.attributes.position.count;
+				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-					geometry1 = new THREE.IcosahedronGeometry( radius, 1 ),
-					geometry2 = new THREE.IcosahedronGeometry( radius, 1 ),
-					geometry3 = new THREE.IcosahedronGeometry( radius, 1 );
+				var geometry2 = geometry1.clone();
+				var geometry3 = geometry1.clone();
 
-				for ( var i = 0; i < geometry1.faces.length; i ++ ) {
+				var positions1 = geometry1.attributes.position;
+				var positions2 = geometry2.attributes.position;
+				var positions3 = geometry3.attributes.position;
+				var colors1 = geometry1.attributes.color;
+				var colors2 = geometry2.attributes.color;
+				var colors3 = geometry3.attributes.color;
 
-					f1 = geometry1.faces[ i ];
-					f2 = geometry2.faces[ i ];
-					f3 = geometry3.faces[ i ];
+				for ( var i = 0; i < count; i ++ ) {
 
-					for( var j = 0; j < 3; j ++ ) {
+					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
+					colors1.setXYZ( i, color.r, color.g, color.b );
 
-						vertexIndex = f1[ faceIndices[ j ] ];
+					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
+					colors2.setXYZ( i, color.r, color.g, color.b );
 
-						p = geometry1.vertices[ vertexIndex ];
-
-						color = new THREE.Color( 0xffffff );
-						color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
-
-						f1.vertexColors[ j ] = color;
-
-						color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
-
-						f2.vertexColors[ j ] = color;
-
-						color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.125 * vertexIndex / geometry1.vertices.length, 1.0, 0.5 );
-
-						f3.vertexColors[ j ] = color;
-
-					}
+					color.setRGB( 1, 1, ( positions3.getY( i ) / radius + 1 ) / 2 );
+					colors3.setXYZ( i, color.r, color.g, color.b );
 
 				}
 
-				var wireframe;
+				var material = new THREE.MeshPhongMaterial( {
+					color: 0xffffff,
+					flatShading: true,
+					vertexColors: THREE.VertexColors,
+					shininess: 0
+				} );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
 				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
 				mesh1 = new THREE.Mesh( geometry1, material );
@@ -189,23 +184,6 @@
 				mesh2.rotation.z += Math.PI / 500;
 				mesh3.rotation.z += Math.PI / 500;
 
-				var geometry = mesh3.geometry;
-
-				for ( var i = 0; i < geometry.faces.length; i ++ ) {
-
-						var f = geometry.faces[ i ];
-
-						for ( var j = 0; j < 3; j ++ ) {
-
-							var color = f.vertexColors[ j ];
-							color.setHex( ( color.getHex() + 0xfdfdfd ) % 0xffffff );
-
-						}
-
-					}
-
-				geometry.colorsNeedUpdate = true;
-
 				//
 
 				var time = performance.now() / 2000;

examples/webgl_multiple_views.html

@@ -159,54 +159,48 @@
 				shadowMesh.rotation.x = - Math. PI / 2;
 				scene.add( shadowMesh );
 
-				var faceIndices = [ 'a', 'b', 'c' ];
+				var radius = 200;
 
-				var color, f, f2, f3, p, vertexIndex,
+				var geometry1 = new THREE.IcosahedronBufferGeometry( radius, 1 );
 
-					radius = 200,
+				var count = geometry1.attributes.position.count;
+				geometry1.addAttribute( 'color', new THREE.BufferAttribute( new Float32Array( count * 3 ), 3 ) );
 
-					geometry  = new THREE.IcosahedronGeometry( radius, 1 ),
-					geometry2 = new THREE.IcosahedronGeometry( radius, 1 ),
-					geometry3 = new THREE.IcosahedronGeometry( radius, 1 );
+				geometry2 = geometry1.clone();
+				geometry3 = geometry1.clone();
 
-				for ( var i = 0; i < geometry.faces.length; i ++ ) {
+				var color = new THREE.Color();
+				var positions1 = geometry1.attributes.position;
+				var positions2 = geometry2.attributes.position;
+				var positions3 = geometry3.attributes.position;
+				var colors1 = geometry1.attributes.color;
+				var colors2 = geometry2.attributes.color;
+				var colors3 = geometry3.attributes.color;
 
-					f  = geometry.faces[ i ];
-					f2 = geometry2.faces[ i ];
-					f3 = geometry3.faces[ i ];
+				for ( var i = 0; i < count; i ++ ) {
 
-					for( var j = 0; j < 3; j++ ) {
+					color.setHSL( ( positions1.getY( i ) / radius + 1 ) / 2, 1.0, 0.5 );
+					colors1.setXYZ( i, color.r, color.g, color.b );
 
-						vertexIndex = f[ faceIndices[ j ] ];
+					color.setHSL( 0, ( positions2.getY( i ) / radius + 1 ) / 2, 0.5 );
+					colors2.setXYZ( i, color.r, color.g, color.b );
 
-						p = geometry.vertices[ vertexIndex ];
-
-						color = new THREE.Color( 0xffffff );
-						color.setHSL( ( p.y / radius + 1 ) / 2, 1.0, 0.5 );
-
-						f.vertexColors[ j ] = color;
-
-						color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.0, ( p.y / radius + 1 ) / 2, 0.5 );
-
-						f2.vertexColors[ j ] = color;
-
-						color = new THREE.Color( 0xffffff );
-						color.setHSL( 0.125 * vertexIndex/geometry.vertices.length, 1.0, 0.5 );
-
-						f3.vertexColors[ j ] = color;
-
-					}
+					color.setRGB( 1, 1, ( positions3.getY( i ) / radius + 1 ) / 2 );
+					colors3.setXYZ( i, color.r, color.g, color.b );
 
 				}
 
-				var mesh, wireframe;
+				var material = new THREE.MeshPhongMaterial( {
+					color: 0xffffff,
+					flatShading: true,
+					vertexColors: THREE.VertexColors,
+					shininess: 0
+				} );
 
-				var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true, vertexColors: THREE.VertexColors, shininess: 0 } );
 				var wireframeMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, transparent: true } );
 
-				mesh = new THREE.Mesh( geometry, material );
-				wireframe = new THREE.Mesh( geometry, wireframeMaterial );
+				mesh = new THREE.Mesh( geometry1, material );
+				wireframe = new THREE.Mesh( geometry1, wireframeMaterial );
 				mesh.add( wireframe );
 				mesh.position.x = - 400;
 				mesh.rotation.x = - 1.87;