How to change use the scene object to add the fog?

[helxsz]

Hi, I have experimented with the Three.js City, it is showing great, and I am now thinking to simulate the environment, like simulating the sunlight change or adding the changing fogs.

Now I am working on the fogged environment.
In the code of Application.js
createScene: function () {
// instantiate the scene (global)
var me = this;
scene = new THREE.Scene();
//scene.fog = new THREE.Fog( 0x808080, 0.14, 600 );
T3.ObjectManager.add('scene', scene); // use for the experiment
return this;
},
I can add scene.fog to simulate the fog of course. but now what I want to do is to have a fog button on the top control bar, the button is clicked to enable/ disable the fog in the environment.
so in the app.js
I add a angular.js function and attach it to the control button.

$scope.enableFog = function(){
    // first approach, I add scene to the T3.ObjectManager, but it didn't work
    var scene = T3.ObjectManager.get('scene');
    scene.fog = new THREE.Fog( 0x808080, 0.14, 600 );
   // second approach,have a global scene variable in Application class, and in createScene() assign this.scene = new THREE.Scene()
  // and at last use T3.Application.scene variable to change
  // but the second approach didn't work either
   T3.Application.scene.fog = new THREE.Fog( 0x808080, 0.14, 600 );
} 

How can I find the scene variable in the Application.js class, I looked through the code, but didn't find the way to make it right

[mauriciopoppe]

Thanks for your interest on this project, I had a hard time remembering the code but now I see what's happening and how you can solve your problem.

First of all T3.ObjectManager is a little singleton which helped me add objects to the global scene with additional features like the internal cache it has, T3.ObjectManager.add works pretty much like THREE.Object3D.add (it needs a parent) so doing this for the scene would be something like scene.add(scene) so if you just want to register an object in this singleton you'd use T3.ObjectManager.register('scene', scene), scene fyi is a global object (I know it's a really bad design) so you don't really need to register it on the ObjectManager

I see in Three.js' wiki that some properties can't be easily changed in runtime (one of them is the fog) so to simulate this enable/disable behavior in runtime you can have a scene with a fog already created and in runtime change its near/far properties

// file Application.js
    createScene: function () {
        // instantiate the scene (global)
        window.scene = new THREE.Scene();      
        window.scene.fog = new THREE.Fog( 0x808080, 300, 1500);
        window.scene.fog.visible = true;
        return this;
    },

And in runtime alter the far/near properties of the fog, I did something like this:

// file Application.js
    toggleFogStatus: function () {
        if (scene.fog.visible) {
            scene.fog.near = Infinity;
            scene.fog.far = Infinity;
        } else {
            scene.fog.near = 300;
            scene.fog.far = 1500;
        }
        scene.fog.visible = !scene.fog.visible;
        return this;
    },

I have added a control for the fog visibility (it's hardcoded but it works), you can find it on the dat.gui menu under the folder World, if you have questions please let me know

[helxsz]

Thanks a lot,maurizzzio. It is great thanks for your help.
Yes, I also look at the forum, and it looks compulsory to have fog initialized in the beginning. so problem looks solved.