Manual: Clean up examples. (#23377)

mrdoob · Jan 29, 2022 · b559473 · b559473
1 parent 144c217
commit b559473
Show file tree

Hide file tree

Showing 29 changed files with 103 additions and 106 deletions.
diff --git a/manual/examples/cleanup-loaded-files.html b/manual/examples/cleanup-loaded-files.html
@@ -107,6 +107,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 75;
   const aspect = 2;  // the canvas default
@@ -120,7 +121,7 @@
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);

diff --git a/manual/examples/game-check-animations.html b/manual/examples/game-check-animations.html
@@ -41,13 +41,13 @@
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(
-        -45deg, 
-        rgba(255, 255, 255, .5) 25%, 
-        transparent 25%, 
-        transparent 50%, 
-        rgba(255, 255, 255, .5) 50%, 
-        rgba(255, 255, 255, .5) 75%, 
-        transparent 75%, 
+        -45deg,
+        rgba(255, 255, 255, .5) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, .5) 50%,
+        rgba(255, 255, 255, .5) 75%,
+        transparent 75%,
         transparent
       );
       background-size: 50px 50px;
@@ -94,6 +94,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -111,7 +112,7 @@
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -246,4 +247,3 @@
 main();
 </script>
 </html>
-
diff --git a/manual/examples/game-conga-line-w-notes.html b/manual/examples/game-conga-line-w-notes.html
@@ -170,6 +170,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -188,7 +189,7 @@
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -977,4 +978,3 @@
 main();
 </script>
 </html>
-
diff --git a/manual/examples/game-conga-line.html b/manual/examples/game-conga-line.html
@@ -170,6 +170,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -188,7 +189,7 @@
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -816,4 +817,3 @@
 main();
 </script>
 </html>
-
diff --git a/manual/examples/game-just-player.html b/manual/examples/game-just-player.html
@@ -47,13 +47,13 @@
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(
-        -45deg, 
-        rgba(255, 255, 255, .5) 25%, 
-        transparent 25%, 
-        transparent 50%, 
-        rgba(255, 255, 255, .5) 50%, 
-        rgba(255, 255, 255, .5) 75%, 
-        transparent 75%, 
+        -45deg,
+        rgba(255, 255, 255, .5) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, .5) 50%,
+        rgba(255, 255, 255, .5) 75%,
+        transparent 75%,
         transparent
       );
       background-size: 50px 50px;
@@ -100,6 +100,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -118,7 +119,7 @@
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -359,4 +360,3 @@
 main();
 </script>
 </html>
-
diff --git a/manual/examples/game-load-models.html b/manual/examples/game-load-models.html
@@ -41,13 +41,13 @@
       height: 1em;
       background-color: #888;
       background-image: linear-gradient(
-        -45deg, 
-        rgba(255, 255, 255, .5) 25%, 
-        transparent 25%, 
-        transparent 50%, 
-        rgba(255, 255, 255, .5) 50%, 
-        rgba(255, 255, 255, .5) 75%, 
-        transparent 75%, 
+        -45deg,
+        rgba(255, 255, 255, .5) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, .5) 50%,
+        rgba(255, 255, 255, .5) 75%,
+        transparent 75%,
         transparent
       );
       background-size: 50px 50px;
@@ -94,6 +94,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -111,7 +112,7 @@
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -219,4 +220,3 @@
 main();
 </script>
 </html>
-
diff --git a/manual/examples/game-player-input.html b/manual/examples/game-player-input.html
@@ -140,6 +140,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -158,7 +159,7 @@
 
   function addLight(...pos) {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(...pos);
     scene.add(light);
@@ -561,4 +562,3 @@
 main();
 </script>
 </html>
-
diff --git a/manual/examples/load-gltf-animated-cars.html b/manual/examples/load-gltf-animated-cars.html
@@ -40,6 +40,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -275,4 +276,3 @@
 main();
 </script>
 </html>
-
diff --git a/manual/examples/load-gltf-car-path-fixed.html b/manual/examples/load-gltf-car-path-fixed.html
@@ -40,6 +40,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -251,4 +252,3 @@
 main();
 </script>
 </html>
-
diff --git a/manual/examples/load-gltf-car-path.html b/manual/examples/load-gltf-car-path.html
@@ -40,6 +40,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -248,4 +249,3 @@
 main();
 </script>
 </html>
-
diff --git a/manual/examples/load-gltf-dump-scenegraph-extra.html b/manual/examples/load-gltf-dump-scenegraph-extra.html
@@ -40,6 +40,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -195,4 +196,3 @@
 main();
 </script>
 </html>
-
diff --git a/manual/examples/load-gltf-dump-scenegraph.html b/manual/examples/load-gltf-dump-scenegraph.html
@@ -40,6 +40,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);
@@ -185,4 +186,3 @@
 main();
 </script>
 </html>
-
diff --git a/manual/examples/load-gltf-rotate-cars-fixed.html b/manual/examples/load-gltf-rotate-cars-fixed.html
@@ -40,6 +40,7 @@
 function main() {
   const canvas = document.querySelector('#c');
   const renderer = new THREE.WebGLRenderer({canvas});
+  renderer.outputEncoding = THREE.sRGBEncoding;
 
   const fov = 45;
   const aspect = 2;  // the canvas default
@@ -79,14 +80,14 @@
   {
     const skyColor = 0xB1E1FF;  // light blue
     const groundColor = 0xB97A20;  // brownish orange
-    const intensity = 1;
+    const intensity = 0.6;
     const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);
     scene.add(light);
   }
 
   {
     const color = 0xFFFFFF;
-    const intensity = 1;
+    const intensity = 0.8;
     const light = new THREE.DirectionalLight(color, intensity);
     light.position.set(5, 10, 2);
     scene.add(light);