Docs: Use color management in scene browsers. (#25816)

docs/scenes/bones-browser.html

@@ -42,6 +42,7 @@
 			import {
 				Bone,
 				Color,
+				ColorManagement,
 				CylinderGeometry,
 				DoubleSide,
 				Float32BufferAttribute,
@@ -60,6 +61,8 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			ColorManagement.enabled = true;
+
 			let gui, scene, camera, renderer, orbit, lights, mesh, bones, skeletonHelper;
 
 			const state = {

docs/scenes/ccdiksolver-browser.html

@@ -46,6 +46,7 @@
 			import {
 				Bone,
 				Color,
+				ColorManagement,
 				CylinderGeometry,
 				DoubleSide,
 				Float32BufferAttribute,
@@ -64,6 +65,8 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			ColorManagement.enabled = true;
+
 			let gui, scene, camera, renderer, orbit, mesh, bones, skeletonHelper, ikSolver;
 
 			const state = {

docs/scenes/geometry-browser.html

@@ -45,6 +45,7 @@
 				CapsuleGeometry,
 				CircleGeometry,
 				Color,
+				ColorManagement,
 				ConeGeometry,
 				Curve,
 				CylinderGeometry,
@@ -81,6 +82,8 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
 
+			ColorManagement.enabled = true;
+
 			const twoPi = Math.PI * 2;
 
 			class CustomSinCurve extends Curve {

docs/scenes/material-browser.html

@@ -44,6 +44,8 @@
 			import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
 			import { RoomEnvironment } from 'three/addons/environments/RoomEnvironment.js';
 
+			THREE.ColorManagement.enabled = true;
+
 			const constants = {
 
 				combine: {
@@ -243,7 +245,7 @@
 
 			}
 
-			function handleColorChange( color, converSRGBToLinear = false ) {
+			function handleColorChange( color ) {
 
 				return function ( value ) {
 
@@ -255,8 +257,6 @@
 
 					color.setHex( value );
 
-					if ( converSRGBToLinear === true ) color.convertSRGBToLinear();
-
 				};
 
 			}
@@ -306,7 +306,7 @@
 					'ambient light': ambientLight.color.getHex()
 				};
 
-				folder.addColor( data, 'ambient light' ).onChange( handleColorChange( ambientLight.color, true ) );
+				folder.addColor( data, 'ambient light' ).onChange( handleColorChange( ambientLight.color ) );
 
 				guiSceneFog( folder, scene );
 
@@ -375,7 +375,7 @@
 
 				const folder = gui.addFolder( 'THREE.MeshBasicMaterial' );
 
-				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
 				folder.add( material, 'wireframe' );
 				folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
 				folder.add( material, 'fog' ).onChange( needsUpdate( material, geometry ) );
@@ -420,7 +420,7 @@
 
 				const folder = gui.addFolder( 'THREE.LineBasicMaterial' );
 
-				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
 				folder.add( material, 'linewidth', 0, 10 );
 				folder.add( material, 'linecap', [ 'butt', 'round', 'square' ] );
 				folder.add( material, 'linejoin', [ 'round', 'bevel', 'miter' ] );
@@ -441,8 +441,8 @@
 
 				const folder = gui.addFolder( 'THREE.MeshLambertMaterial' );
 
-				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
-				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive, true ) );
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
 
 				folder.add( material, 'wireframe' );
 				folder.add( material, 'vertexColors' ).onChange( needsUpdate( material, geometry ) );
@@ -467,7 +467,7 @@
 
 				const folder = gui.addFolder( 'THREE.MeshMatcapMaterial' );
 
-				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
 
 				folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
 				folder.add( data, 'matcap', matcapKeys ).onChange( updateTexture( material, 'matcap', matcaps ) );
@@ -488,8 +488,8 @@
 
 				const folder = gui.addFolder( 'THREE.MeshPhongMaterial' );
 
-				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
-				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive, true ) );
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
 				folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
 
 				folder.add( material, 'shininess', 0, 100 );
@@ -517,7 +517,7 @@
 
 				const folder = gui.addFolder( 'THREE.MeshToonMaterial' );
 
-				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
 				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
 				folder.add( data, 'gradientMap', gradientMapKeys ).onChange( updateTexture( material, 'gradientMap', gradientMaps ) );
 				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
@@ -537,8 +537,8 @@
 
 				const folder = gui.addFolder( 'THREE.MeshStandardMaterial' );
 
-				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
-				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive, true ) );
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
 
 				folder.add( material, 'roughness', 0, 1 );
 				folder.add( material, 'metalness', 0, 1 );
@@ -568,8 +568,8 @@
 
 				const folder = gui.addFolder( 'THREE.MeshPhysicalMaterial' );
 
-				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color, true ) );
-				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive, true ) );
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
 
 				folder.add( material, 'roughness', 0, 1 );
 				folder.add( material, 'metalness', 0, 1 );