add fog, no fog example

threejs/lessons/resources/lesson.css

@@ -53,6 +53,9 @@ div[data-diagram] {
   height: 100vh;
   z-index: -100;
 }
+.border {
+  border: 1px solid black;
+}
 
 
 .threejs_navbar>div,

threejs/lessons/resources/threejs-fog.js

@@ -13,6 +13,63 @@
     return new THREE.Mesh(geometry, material);
   }
 
+  function houseScene(props, fogInHouse) {
+    const {scene, camera} = props;
+    camera.far = 200;
+    const loader = new THREE.GLTFLoader();
+    const settings = {
+      shininess: 0,
+      roughness: 1,
+      metalness: 0,
+      side: THREE.DoubleSide,
+    };
+    loader.load('../resources/models/simple_house_scene/scene.gltf', (gltf) => {
+      const materials = new Set();
+      gltf.scene.traverse((node) => {
+        const material = node.material;
+        if (material) {
+          (Array.isArray(material) ? material : [material]).forEach((material) => {
+            if (!materials.has(material)) {
+              materials.add(material);
+              for (const [key, value] of Object.entries(settings)) {
+                if (material[key] !== undefined) {
+                  material[key] = value;
+                }
+              }
+              if (!fogInHouse && material.name.startsWith('fogless')) {
+                material.fog = false;
+              }
+            }
+          });
+        }
+      });
+      scene.add(gltf.scene);
+    });
+
+    camera.fov = 30;
+    camera.position.set(0.4, 1, 1.7);
+    camera.lookAt(1, 1, 0.7);
+
+    const color = 0xFFFFFF;
+    const near = 1.5;
+    const far = 5;
+    scene.fog = new THREE.Fog(color, near, far);
+
+    const light = new THREE.PointLight(0xFFFFFF, 1);
+    light.position.copy(camera.position);
+    light.position.y += 0.2;
+    scene.add(light);
+
+    const target = [1, 1, 0.7];
+    return {
+      obj3D: new THREE.Object3D(),
+      update: (time) => {
+        camera.lookAt(target[0] + Math.sin(time * .25) * .5, target[1], target[2]);
+      },
+    };
+
+  }
+
   threejsLessonUtils.addDiagrams({
     fog: {
       create(props) {
@@ -51,5 +108,15 @@
         return fogExample(scene, new THREE.Fog(color, near, far));
       },
     },
+    fogHouseAll: {
+      create(props) {
+        return houseScene(props, true);
+      },
+    },
+    fogHouseInsideNoFog: {
+      create(props) {
+        return houseScene(props, false);
+      },
+    },
   });
 }

threejs/lessons/threejs-fog.md

@@ -73,11 +73,11 @@ scene.background = new THREE.Color('#F00');  // red
 
 <div class="spread">
   <div>
-    <div data-diagram="fogBlueBackgroundRed"></div>
+    <div data-diagram="fogBlueBackgroundRed" class="border"></div>
     <div class="code">fog blue, background red</div>
   </div>
   <div>
-    <div data-diagram="fogBlueBackgroundBlue"></div>
+    <div data-diagram="fogBlueBackgroundBlue" class="border"></div>
     <div class="code">fog blue, background blue</div>
   </div>
 </div>
@@ -242,10 +242,33 @@ for most materials. As an example of why you might want
 to turn the fog off, imagine you're making a 3D vehicle
 simulator with a view from the driver's seat or cockpit.
 You probably want the fog off for everything inside the vehicle when
-viewing from inside the vehicle.
+viewing from inside the vehicle. 
+
+A better example might be a house
+and thick fog outside house. Let's say the fog is set to start
+2 meters away (near = 2) and completely fogged out at 4 meters (far = 4).
+Rooms are longer than 2 meters and the house is probably longer
+than 4 meters so you need to set the materials for the inside
+of the house to not apply fog otherwise when standing inside the
+house looking outside the wall at the far end of the room will look 
+like it's in the fog.
+
+<div class="spread">
+  <div>
+    <div data-diagram="fogHouseAll" style="height: 300px;" class="border"></div>
+    <div class="code">fog: true, all</div>
+  </div>
+</div>
+<div class="spread">
+  <div>
+    <div data-diagram="fogHouseInsideNoFog" style="height: 300px;" class="border"></div>
+    <div class="code">fog: true, only outside materials</div>
+  </div>
+</div>
 
 <canvas id="c"></canvas>
 <script src="../resources/threejs/r94/three.min.js"></script>
 <script src="../resources/threejs/r94/js/controls/TrackballControls.js"></script>
+<script src="../resources/threejs/r94/js/loaders/GLTFLoader.js"></script>
 <script src="resources/threejs-lesson-utils.js"></script>
 <script src="resources/threejs-fog.js"></script>