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

javascriptjquerythree.jswebgl

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 http://mrdoob.github.io/three.js/examples/webgl_materials_cubemap_dynamic.html 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;
  }
}

//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);
}

Best Solution

See https://github.com/mrdoob/three.js/wiki/Updates

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.