Learn Three.js - Third Edition

Adding fog to the scene

The fog property lets you add a fog effect to the complete scene; the farther an object is from the camera, the more it will be hidden from sight, as shown in the following screenshot:

55 FPS (12-60)

To best see the effect of the added fog, use the mouse to zoom in and out, and you'll see the cubes being affected by the fog. Enabling fog is really easy in Three.js. Just add the following line of code after you've defined your scene:

scene.fog = new THREE.Fog( 0xffffff, 0.015, 100 ); 

Here, we define a white fog (0xffffff). The preceding two properties can be used to tune how the mist appears. The 0.015 value sets the ...