LDrawLoader Example: Demonstrate loading flat colors to match instruction booklet style (#23098)

* Add support for flat colors to ldraw demo

* comment

* improve colore representation

* disable tone mapping per material

examples/webgl_loader_ldraw.html

@@ -97,7 +97,8 @@
 					conditionalLines: true,
 					smoothNormals: true,
 					constructionStep: 0,
-					noConstructionSteps: 'No steps.'
+					noConstructionSteps: 'No steps.',
+					flatColors: false,
 				};
 
 				window.addEventListener( 'resize', onWindowResize );
@@ -159,9 +160,10 @@
 				updateProgressBar( 0 );
 				showProgressBar();
 
+				// only smooth when not rendering with flat colors to improve processing time
 				const lDrawLoader = new LDrawLoader();
 				lDrawLoader.separateObjects = guiData.separateObjects;
-				lDrawLoader.smoothNormals = guiData.smoothNormals;
+				lDrawLoader.smoothNormals = guiData.smoothNormals && ! guiData.flatColors;
 				lDrawLoader
 					.setPath( ldrawPath )
 					.load( guiData.modelFileName, function ( group2 ) {
@@ -174,6 +176,45 @@
 
 						model = group2;
 
+						// demonstrate how to use convert to flat colors to better mimic the lego instructions look
+						if ( guiData.flatColors ) {
+
+							function convertMaterial( material ) {
+
+								const newMaterial = new THREE.MeshBasicMaterial();
+								newMaterial.color.copy( material.color );
+								newMaterial.polygonOffset = material.polygonOffset;
+								newMaterial.polygonOffsetUnits = material.polygonOffsetUnits;
+								newMaterial.polygonOffsetFactor = material.polygonOffsetFactor;
+								newMaterial.opacity = material.opacity;
+								newMaterial.transparent = material.transparent;
+								newMaterial.depthWrite = material.depthWrite;
+								newMaterial.toneMapping = false;
+
+								return newMaterial;
+
+							}
+
+							model.traverse( c => {
+
+								if ( c.isMesh ) {
+
+									if ( Array.isArray( c.material ) ) {
+
+										c.material = c.material.map( convertMaterial );
+
+									} else {
+
+										c.material = convertMaterial( c.material );
+
+									}
+
+								}
+
+							} );
+
+						}
+
 						// Convert from LDraw coordinates: rotate 180 degrees around OX
 						model.rotation.x = Math.PI;
 
@@ -236,6 +277,12 @@
 
 				} );
 
+				gui.add( guiData, 'flatColors' ).name( 'Flat Colors' ).onChange( function () {
+
+					reloadObject( false );
+
+				} );
+
 				if ( guiData.separateObjects ) {
 
 					if ( model.userData.numConstructionSteps > 1 ) {