Fog

Fog

Fog makes distant objects fade into the background, creating a sense of atmosphere and depth. Set it directly on the scene.

Fog (Linear)

THREE.Fog fades linearly from near to far distance:

scene.fog = new THREE.Fog(0xccccff, 10, 50);
// color, near (start), far (full opacity)

Objects closer than near are unaffected; beyond far they are completely the fog color.

FogExp2 (Exponential)

THREE.FogExp2 uses an exponential curve for more realistic-looking haze:

scene.fog = new THREE.FogExp2(0x8899aa, 0.05);
// color, density (higher = thicker)

Matching Background

For a seamless look, match the scene background to the fog color:

const fogColor = 0x334455;
scene.background = new THREE.Color(fogColor);
scene.fog = new THREE.Fog(fogColor, 10, 60);

Fog Properties

const fog = new THREE.Fog(0xffffff, 5, 30);
console.log(fog.color.getHexString()); // "ffffff"
console.log(fog.near);  // 5
console.log(fog.far);   // 30

const fog2 = new THREE.FogExp2(0xaabbcc, 0.02);
console.log(fog2.density); // 0.02

Your Task

Implement createFog(colorHex, near, far) that returns a THREE.Fog with the given parameters.