Manual: Honor latest changes. (#26353)

Author: Mugen87

manual/en/backgrounds.html

@@ -73,6 +73,7 @@ <h1>Backgrounds and Skyboxes</h1>
 a texture.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">const loader = new THREE.TextureLoader();
 const bgTexture = loader.load('resources/images/daikanyama.jpg');
+bgTexture.colorSpace = THREE.SRGBColorSpace;
 scene.background = bgTexture;
 </pre>
 <p>which gives us</p>
@@ -219,11 +220,6 @@ <h1>Backgrounds and Skyboxes</h1>
 <a href="https://hdrihaven.com">this site</a>.</p>
 <div class="threejs_center"><img src="../examples/resources/images/equirectangularmaps/tears_of_steel_bridge_2k.jpg" style="width: 600px"></div>
 
-<p>It's not much different. First we load the equirectangular image as a texture
-and then, in the callback after it has loaded, we can call <a href="/docs/#api/en/renderers/WebGLCubeRenderTarget.fromEquirectangularTexture"><code class="notranslate" translate="no">WebGLCubeRenderTarget.fromEquirectangularTexture</code></a>
-which will generate a cubemap from the equirectangular texture for us.
-We pass in the size we want the cubemap to be to <a href="/docs/#api/en/renderers/WebGLCubeRenderTarget"><code class="notranslate" translate="no">WebGLCubeRenderTarget</code></a>.
-Passing in the height of the equirectangular image seems like a good bet.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
 -  const loader = new THREE.CubeTextureLoader();
 -  const texture = loader.load([
@@ -239,9 +235,9 @@ <h1>Backgrounds and Skyboxes</h1>
 +  const texture = loader.load(
 +    'resources/images/equirectangularmaps/tears_of_steel_bridge_2k.jpg',
 +    () =&gt; {
-+      const rt = new THREE.WebGLCubeRenderTarget(texture.image.height);
-+      rt.fromEquirectangularTexture(renderer, texture);
-+      scene.background = rt.texture;
++      texture.mapping = THREE.EquirectangularReflectionMapping;
++      texture.colorSpace = THREE.SRGBColorSpace;
++      scene.background = texture;
 +    });
 }
 </pre>

manual/en/custom-buffergeometry.html

@@ -436,8 +436,7 @@ <h1>Custom BufferGeometry</h1>
 make your own geometry and how to dynamically update the contents of a
 <a href="/docs/#api/en/core/BufferAttribute"><code class="notranslate" translate="no">BufferAttribute</code></a>.</p>
 <!-- needed in English only to prevent warning from outdated translations -->
-<p><a href="resources/threejs-geometry.svg"></a>
-<a href="custom-geometry.html"></a></p>
+<p><a href="resources/threejs-geometry.svg"></a></p>
 <p><canvas id="c"></canvas></p>
 <script type="module" src="../resources/threejs-custom-buffergeometry.js"></script>
 

manual/en/fundamentals.html

@@ -273,7 +273,7 @@ <h1>Fundamentals</h1>
 three.js which we'll go over in <a href="lights.html">a future article</a>. For now let's create a directional light.</p>
 <pre class="prettyprint showlinemods notranslate lang-js" translate="no">{
   const color = 0xFFFFFF;
-  const intensity = 1;
+  const intensity = 3;
   const light = new THREE.DirectionalLight(color, intensity);
   light.position.set(-1, 2, 4);
   scene.add(light);

manual/examples/3dlut-base-cube-maker.html

@@ -26,63 +26,88 @@ <h1>Color Cube Image Maker</h1>
 </body>
 <script type="module">
 
-const ctx = document.querySelector('canvas').getContext('2d');
-
-function drawColorCubeImage(ctx, size) {
-  const canvas = ctx.canvas;
-  canvas.width = size * size;
-  canvas.height = size;
-
-  for (let zz = 0; zz < size; ++zz) {
-    for (let yy = 0; yy < size; ++yy) {
-      for (let xx = 0; xx < size; ++xx) {
-        const r = Math.floor(xx / (size - 1) * 255);
-        const g = Math.floor(yy / (size - 1) * 255);
-        const b = Math.floor(zz / (size - 1) * 255);
-        ctx.fillStyle = `rgb(${r},${g},${b})`;
-        ctx.fillRect(zz * size + xx, yy, 1, 1);
-      }
-    }
-  }
-  document.querySelector('#width').textContent = canvas.width;
-  document.querySelector('#height').textContent = canvas.height;
+const ctx = document.querySelector( 'canvas' ).getContext( '2d' );
+
+function drawColorCubeImage( ctx, size ) {
+
+	const canvas = ctx.canvas;
+	canvas.width = size * size;
+	canvas.height = size;
+
+	for ( let zz = 0; zz < size; ++ zz ) {
+
+		for ( let yy = 0; yy < size; ++ yy ) {
+
+			for ( let xx = 0; xx < size; ++ xx ) {
+
+				const r = Math.floor( xx / ( size - 1 ) * 255 );
+				const g = Math.floor( yy / ( size - 1 ) * 255 );
+				const b = Math.floor( zz / ( size - 1 ) * 255 );
+				ctx.fillStyle = `rgb(${r},${g},${b})`;
+				ctx.fillRect( zz * size + xx, yy, 1, 1 );
+
+			}
+
+		}
+
+	}
+
+	document.querySelector( '#width' ).textContent = canvas.width;
+	document.querySelector( '#height' ).textContent = canvas.height;
+
 }
 
-drawColorCubeImage(ctx, 8);
-
-function handleSizeChange(event) {
-  const elem = event.target;
-  elem.style.background = '';
-  try {
-    const size = parseInt(elem.value);
-    if (size >= 2 && size <= 64) {
-      drawColorCubeImage(ctx, size);
-    }
-  } catch (e) {
-    elem.style.background = 'red';
-  }
+drawColorCubeImage( ctx, 8 );
+
+function handleSizeChange( event ) {
+
+	const elem = event.target;
+	elem.style.background = '';
+	try {
+
+		const size = parseInt( elem.value );
+		if ( size >= 2 && size <= 64 ) {
+
+			drawColorCubeImage( ctx, size );
+
+		}
+
+	} catch ( e ) {
+
+		elem.style.background = 'red';
+
+	}
+
 }
 
-const sizeElem = document.querySelector('#size');
-sizeElem.addEventListener('change', handleSizeChange, true);
-
-const saveData = (function() {
-  const a = document.createElement('a');
-  document.body.appendChild(a);
-  a.style.display = 'none';
-  return function saveData(blob, fileName) {
-    const url = window.URL.createObjectURL(blob);
-    a.href = url;
-    a.download = fileName;
-    a.click();
-  };
-}());
-
-document.querySelector('button').addEventListener('click', () => {
-  ctx.canvas.toBlob((blob) => {
-    saveData(blob, `identity-lut-s${ctx.canvas.height}.png`);
-  });
-});
+const sizeElem = document.querySelector( '#size' );
+sizeElem.addEventListener( 'change', handleSizeChange, true );
+
+const saveData = ( function () {
+
+	const a = document.createElement( 'a' );
+	document.body.appendChild( a );
+	a.style.display = 'none';
+	return function saveData( blob, fileName ) {
+
+		const url = window.URL.createObjectURL( blob );
+		a.href = url;
+		a.download = fileName;
+		a.click();
+
+	};
+
+}() );
+
+document.querySelector( 'button' ).addEventListener( 'click', () => {
+
+	ctx.canvas.toBlob( ( blob ) => {
+
+		saveData( blob, `identity-lut-s${ctx.canvas.height}.png` );
+
+	} );
+
+} );
 
 </script>
 </html>