title: Light rays from point light three.js
body: <p>Is there a way to see the light rays from a point light in a Three js scene. I have tried fog but it makes the whole objects in the scene the color of fog.</p>
  
  <pre><code> var width = $('#g_pre_emo').width();
  
   var scene = new THREE.Scene();
   scene.fog = new THREE.Fog(0xffff00, 0, 10);
   var camera = new THREE.PerspectiveCamera(50, width / 500, 0.1, 1000);
   var renderer = new THREE.WebGLRenderer({antialias: false});
   renderer.setSize(width, 500);
  
   $('#g_pre_emo').append(renderer.domElement);
  
  
   var intensity = 2.5;
   var distance = 5;
   var decay = 2.0;
  
   var light = new THREE.AmbientLight(0x404040); // soft white light
   scene.add(light);
  
  renderer.shadowMap.Enabled = true;
  renderer.setClearColor(0xffffff, 1);
  var happyGroup = new THREE.Object3D();
  var sadGroup = new THREE.Object3D();
  var angryGroup = new THREE.Object3D();
  var relaxedGroup = new THREE.Object3D();
  
  scene.add(happyGroup);
  scene.add(sadGroup);
  scene.add(angryGroup);
  scene.add(relaxedGroup);
  var c1 = 0xffff00;
  
  
  var sphere = new THREE.SphereGeometry(0.25, 16, 8);
  light1 = new THREE.PointLight(c1, intensity, distance, decay);
  light1.add(new THREE.Mesh(sphere, new THREE.MeshBasicMaterial({color: c1})));
  scene.add(light1);
  
  happyGroup.position.set(-3, 3, 0);
  sadGroup.position.set(3, 3, 0);
  angryGroup.position.set(-3, -3, 0);
  relaxedGroup.position.set(3, -3, 0);
  
  
  var happyGeometry = new THREE.SphereGeometry(1, 50, 50);
  var happyMaterial = new THREE.MeshNormalMaterial();
  var happySphere = new THREE.Mesh(happyGeometry, happyMaterial);
  scene.add(happySphere);
  happyGroup.add(happySphere);
  
  var sadGeometry = new THREE.SphereGeometry(1, 50, 50);
  var sadMaterial = new THREE.MeshNormalMaterial();
  var sadSphere = new THREE.Mesh(sadGeometry, sadMaterial);
  scene.add(sadSphere);
  sadGroup.add(sadSphere);
  
  var angryGeometry = new THREE.SphereGeometry(1, 50, 50);
  var angryMaterial = new THREE.MeshNormalMaterial();
  var angrySphere = new THREE.Mesh(angryGeometry, angryMaterial);
  scene.add(angrySphere);
  angryGroup.add(angrySphere);
  
  var relaxedGeometry = new THREE.SphereGeometry(1, 50, 50);
  var relaxedMaterial = new THREE.MeshNormalMaterial();
  var relaxedSphere = new THREE.Mesh(relaxedGeometry, relaxedMaterial);
  scene.add(relaxedSphere);
  relaxedGroup.add(relaxedSphere);
  
  
  renderer.gammaInput = true;
  renderer.gammaOutput = true;
  camera.position.z = 15;
  
  function render() {
      renderer.render(scene, camera);
  }
   ;
  render();
  animate();
  function animate() {
      requestAnimationFrame(animate);
  
  }
  </code></pre>
  
  <p>If i run the above code the i cant see any fog in the scene 
  the fiddle for above code is 
  <a href="https://jsfiddle.net/bqv5ynbo/1/" rel="nofollow noreferrer">https://jsfiddle.net/bqv5ynbo/1/</a></p>