Add vertex color option to collada export example (#23384)

Author: gkjohnson

examples/misc_exporter_collada.html

@@ -52,6 +52,7 @@
 			let bFitLid;
 			let bNonBlinn;
 			let shading;
+			let vertexColors;
 			let wireMaterial, flatMaterial, gouraudMaterial, phongMaterial, texturedMaterial, normalMaterial, reflectiveMaterial;
 
 			let teapot, textureCube;
@@ -182,6 +183,7 @@
 					lhue:	0.04,
 					lsaturation: 0.01,	// non-zero so that fractions will be shown
 					llightness: 1.0,
+					vertexColors: false,
 
 					// bizarrely, if you initialize these with negative numbers, the sliders
 					// will not show any decimal places.
@@ -217,6 +219,7 @@
 				h.add( effectController, 'hue', 0.0, 1.0, 0.025 ).name( 'hue' ).onChange( render );
 				h.add( effectController, 'saturation', 0.0, 1.0, 0.025 ).name( 'saturation' ).onChange( render );
 				h.add( effectController, 'lightness', 0.0, 1.0, 0.025 ).name( 'lightness' ).onChange( render );
+				h.add( effectController, 'vertexColors' ).onChange( render );
 
 				// light (point)
 
@@ -263,7 +266,8 @@
 					effectController.body !== bBody ||
 					effectController.fitLid !== bFitLid ||
 					effectController.nonblinn !== bNonBlinn ||
-					effectController.newShading !== shading ) {
+					effectController.newShading !== shading ||
+					effectController.vertexColors !== vertexColors ) {
 
 					tess = effectController.newTess;
 					bBottom = effectController.bottom;
@@ -272,6 +276,7 @@
 					bFitLid = effectController.fitLid;
 					bNonBlinn = effectController.nonblinn;
 					shading = effectController.newShading;
+					vertexColors = effectController.vertexColors;
 
 					createNewTeapot();
 
@@ -356,6 +361,37 @@
 									shading === 'textured' ? texturedMaterial : (
 										shading === 'normal' ? normalMaterial : reflectiveMaterial ) ) ) ) ) );	// if no match, pick Phong
 
+
+				if ( effectController.vertexColors ) {
+
+					teapot.geometry.computeBoundingBox();
+					const minY = teapot.geometry.boundingBox.min.y;
+					const maxY = teapot.geometry.boundingBox.max.y;
+					const sizeY = maxY - minY;
+
+					const colors = [];
+					const position = teapot.geometry.getAttribute( 'position' );
+					for ( let i = 0, l = position.count; i < l; i ++ ) {
+
+						const y = position.getY( i );
+						const r = ( y - minY ) / sizeY;
+						const b = 1.0 - r;
+
+						colors.push( r * 128, 0, b * 128 );
+
+					}
+					teapot.geometry.setAttribute( 'color', new THREE.Uint8BufferAttribute( colors, 3, true ) );
+					teapot.material.vertexColors = true;
+					teapot.material.needsUpdate = true;
+
+				} else {
+
+					teapot.geometry.deleteAttribute( 'color' );
+					teapot.material.vertexColors = false;
+					teapot.material.needsUpdate = true;
+
+				}
+
 				scene.add( teapot );
 
 			}