title: Using THREEJS, i am trying to have a toggle for fog in a scene
body: <p><strong>EDIT:</strong>  You cannot add FOG after the scene is rendered because it has to do computations with shaders.  </p>
  
  <ul>
  <li>IF you do it, it will show the machine down because ALL shaders will have to be rerendered. </li>
  <li>IF you NEED fog, it is better computationally if you render it WITH fog, but set density to 0 (or 0.01) so that way there is no real visible fog.  A Good reason for this is because the FOG computations are CREATED, you would just need to adjust densities and the page will load.</li>
  </ul>
  
  <p><strong>CURRENT PLAN:</strong> I need to figure out how to change densities.  I am looking through the FOG object and the Scene to see what i can find.</p>
  
  <p><strong>Original Question:</strong></p>
  
  <p>I have a toggle on/off that when clicked, is suppose to add/remove fog from the scene, but it seems like it doesnt add any fog to the scene.  I run scene.fog on the console to see that it HAS it.</p>
  
  <p>I figured we could just add and remove it like what I did.  Is there something else which is dependent for implementing fog?  I was trying to work off of <a href="http://mrdoob.github.io/three.js/examples/webgl_materials_cubemap_dynamic.html" rel="nofollow">http://mrdoob.github.io/three.js/examples/webgl_materials_cubemap_dynamic.html</a> to see how fog works, but i didnt see any other lines then what i did.   MAYBE i need to do some sort of scene refresh after adjusting the scene like i am?</p>
  
  <pre><code>function toggledata(){
    var toggle = $(this).val();  // 'on' or 'off'
    if (toggle == 'on')
    {
      scene.fog = new THREE.Fog(0xffffff, 10, 60);
      scene.fog.color.setHSL( 0.51, 0.6, 0.6 );
    }
    else if (toggle == 'off')
    {
      scene.fog = null;
    }
  }
  </code></pre>
  
  <hr>
  
  <pre><code>//GLOBALS
  var scene, container, etc.
  
  function init()
  {
    container = $('#MODELDIV');
  
    // SCENE
    scene = new THREE.Scene();
  
    // CAMERA
    var SCREEN_WIDTH = container.width();
    var SCREEN_HEIGHT = container.height();
  
    var VIEW_ANGLE = 45;
    var ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT;
    var NEAR = 0.1;
    var FAR = 20000000;
  
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
  
    scene.add(camera);
  
    camera.position.set(3043.0732, 98.8883, 141.0916);
  
    camera.lookAt(3043.0732, 98.8883, 41.0916);
    //CAMERA_LIST.push(camera);
  
    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
    renderer.setClearColor(0x000000);
  
    renderer.sortObjects = true;
  
    container.append(renderer.domElement);
  
    controls = new THREE.OrbitControls(camera, renderer.domElement);
  
    var directionalLight = new THREE.DirectionalLight(0xffffff);
    directionalLight.position.set(1, 1, 1).normalize();
    scene.add(directionalLight);
    LIGHT_LIST.push(directionalLight);
  
    var ambientLight = new THREE.AmbientLight(0xbbbbbb);
  }
  </code></pre>