Examples: Clean up legacy .outputColorSpace = LinearSRGBColorSpace examples (#25844)

Author: donmccurdy

examples/misc_boxselection.html

@@ -51,6 +51,8 @@
 			import { SelectionBox } from 'three/addons/interactive/SelectionBox.js';
 			import { SelectionHelper } from 'three/addons/interactive/SelectionHelper.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let container, stats;
 			let camera, scene, renderer;
 
@@ -111,7 +113,6 @@
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				renderer.shadowMap.enabled = true;
 				renderer.shadowMap.type = THREE.PCFShadowMap;
 

examples/misc_controls_map.html

@@ -43,6 +43,8 @@
 
 			import { MapControls } from 'three/addons/controls/MapControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, controls, scene, renderer;
 
 			init();
@@ -58,7 +60,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
@@ -84,7 +85,7 @@
 
 				const geometry = new THREE.BoxGeometry( 1, 1, 1 );
 				geometry.translate( 0, 0.5, 0 );
-				const material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
+				const material = new THREE.MeshPhongMaterial( { color: 0xeeeeee, flatShading: true } );
 
 				for ( let i = 0; i < 500; i ++ ) {
 

examples/misc_controls_orbit.html

@@ -41,6 +41,8 @@
 
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, controls, scene, renderer;
 
 			init();
@@ -56,7 +58,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );

examples/misc_controls_pointerlock.html

@@ -61,6 +61,8 @@
 
 			import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let camera, scene, renderer, controls;
 
 			const objects = [];
@@ -216,7 +218,7 @@
 
 				for ( let i = 0, l = position.count; i < l; i ++ ) {
 
-					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
+					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75, THREE.SRGBColorSpace );
 					colorsFloor.push( color.r, color.g, color.b );
 
 				}
@@ -237,7 +239,7 @@
 
 				for ( let i = 0, l = position.count; i < l; i ++ ) {
 
-					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
+					color.setHSL( Math.random() * 0.3 + 0.5, 0.75, Math.random() * 0.25 + 0.75, THREE.SRGBColorSpace );
 					colorsBox.push( color.r, color.g, color.b );
 
 				}
@@ -247,7 +249,7 @@
 				for ( let i = 0; i < 500; i ++ ) {
 
 					const boxMaterial = new THREE.MeshPhongMaterial( { specular: 0xffffff, flatShading: true, vertexColors: true } );
-					boxMaterial.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75 );
+					boxMaterial.color.setHSL( Math.random() * 0.2 + 0.5, 0.75, Math.random() * 0.25 + 0.75, THREE.SRGBColorSpace );
 
 					const box = new THREE.Mesh( boxGeometry, boxMaterial );
 					box.position.x = Math.floor( Math.random() * 20 - 10 ) * 20;
@@ -264,7 +266,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				//

examples/misc_controls_trackball.html

@@ -44,6 +44,8 @@
 
 			import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			let perspectiveCamera, orthographicCamera, controls, scene, renderer, stats;
 
 			const params = {
@@ -104,7 +106,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.outputColorSpace = THREE.LinearSRGBColorSpace;
 				document.body.appendChild( renderer.domElement );
 
 				stats = new Stats();