Javascript – Using THREEJS, i am trying to have a toggle for fog in a scene


EDIT: You cannot add FOG after the scene is rendered because it has to do computations with shaders.

  • IF you do it, it will show the machine down because ALL shaders will have to be rerendered.
  • 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.

CURRENT PLAN: 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.

Original Question:

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.

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 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?

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;

var scene, container, etc.

function init()
  container = $('#MODELDIV');

  // SCENE
  scene = new THREE.Scene();

  var SCREEN_WIDTH = container.width();
  var SCREEN_HEIGHT = container.height();

  var VIEW_ANGLE = 45;
  var NEAR = 0.1;
  var FAR = 20000000;

  camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);


  camera.position.set(3043.0732, 98.8883, 141.0916);

  camera.lookAt(3043.0732, 98.8883, 41.0916);

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

  renderer.sortObjects = true;


  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var directionalLight = new THREE.DirectionalLight(0xffffff);
  directionalLight.position.set(1, 1, 1).normalize();

  var ambientLight = new THREE.AmbientLight(0xbbbbbb);

Best Solution


Fog can't be easily removed from the scene as it is built into the material shaders upon first render.

You can however set it's intensity to 0 to get similar appearance.