Label and convert textures and colors correctly in MTLLoader (#23296)

examples/jsm/loaders/MTLLoader.js

@@ -8,7 +8,8 @@ import {
 	MeshPhongMaterial,
 	RepeatWrapping,
 	TextureLoader,
-	Vector2
+	Vector2,
+	sRGBEncoding
 } from 'three';
 
 /**
@@ -358,6 +359,12 @@ class MaterialCreator {
 			map.wrapS = scope.wrap;
 			map.wrapT = scope.wrap;
 
+			if ( mapType === 'map' || mapType === 'emissiveMap' ) {
+
+				map.encoding = sRGBEncoding;
+
+			}
+
 			params[ mapType ] = map;
 
 		}
@@ -377,21 +384,21 @@ class MaterialCreator {
 
 					// Diffuse color (color under white light) using RGB values
 
-					params.color = new Color().fromArray( value );
+					params.color = new Color().fromArray( value ).convertSRGBToLinear();
 
 					break;
 
 				case 'ks':
 
 					// Specular color (color when light is reflected from shiny surface) using RGB values
-					params.specular = new Color().fromArray( value );
+					params.specular = new Color().fromArray( value ).convertSRGBToLinear();
 
 					break;
 
 				case 'ke':
 
 					// Emissive using RGB values
-					params.emissive = new Color().fromArray( value );
+					params.emissive = new Color().fromArray( value ).convertSRGBToLinear();
 
 					break;
 

examples/webgl_loader_obj_mtl.html

@@ -105,6 +105,7 @@
 				//
 
 				renderer = new THREE.WebGLRenderer();
+				renderer.outputEncoding = THREE.sRGBEncoding;
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				container.appendChild( renderer.domElement );