title: three.js fog not rendering?
body: <p>I'm trying to add fog to my scene but it just won't render?</p>
  
  <p>I have done some searching but there seem to be no answer to my problem. Here is a screenshot of the problem</p>
  
  <p><a href="https://i.stack.imgur.com/ThJRh.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ThJRh.png" alt="no fog"></a></p>
  
  <p>This is the code demo: <a href="https://jsfiddle.net/7orbmn4t/" rel="nofollow noreferrer">https://jsfiddle.net/7orbmn4t/</a></p>
  
  <pre><code>var scene = new THREE.Scene();
  scene.background = new THREE.Color(0xcce0ff);
  scene.fog = new THREE.Fog(0xff0000, 10, 500);
  
  var camera = new THREE.PerspectiveCamera(
    90,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
  );
  
  camera.rotation.x = 0.7853;
  camera.position.set(0, 0, 15);
  var renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  
  scene.add( new THREE.AmbientLight( 0xffffff ) );
  
  var geometry = new THREE.PlaneBufferGeometry(100, 100, 0);
  var material = new THREE.MeshLambertMaterial({
    color: 0x898989,
    fog: true
  });
  var plane = new THREE.Mesh(geometry, material);
  scene.add(plane);
  
  renderer.render(scene, camera);
  document.body.appendChild(renderer.domElement);
  </code></pre>