Using Fog Effects in Three.js | Creating Depth in 3D Scenes

Using Fog in Three.js (Fog / Mist Effect) — Three.js [r145]

Do you want to create a 3D scene with depth using fog in Three.js?
This article explains the basic settings for enabling fog.
Fog gradually blends objects into a specified color as they move farther from the camera.
To use fog, simply assign an instance of THREE.Fog to scene.fog.

    // Create the scene
    scene = new THREE.Scene();
    // Set fog: new THREE.Fog(fogColor, startDistance, endDistance);
    scene.fog = new THREE.Fog(0xffffff, 260, 400);

Left mouse drag rotates, right mouse drag moves, and the mouse wheel zooms.

WebGL(Three.js)