How to use different fog classes in three.js
Three.js is a JavaScript library based on WebGL that empowers developers to create stunning web visualizations with ease. This library simplifies the process of rendering captivating scenes on the web using straightforward methods that are accessible to all. In this Answer, we'll explore how to harness the power of fog within our three.js scenes. Three.js provides two classes that enable us to replicate the atmospheric effects of fog:
FogFogExp2
These classes open the door to enhancing the depth and ambiance of our scenes, immersing users in captivating virtual worlds. With these tools at our disposal, we gain control over the density and color of the fog, allowing us to craft anything from eerie landscapes to submerged environments. By mastering the use of these fog classes, we'll be well-equipped to create engaging and visually immersive web experiences. However, before we delve into the intricacies of using fog, let's first establish a foundational understanding of how to set up a basic three.js scene.
Note: For further insights into three.js and comprehensive guidance on scene setup, you can explore the following resources:
Now, let's have a look at the syntax for initializing both classes.
The Fog class
The Fog class allows us to create fog that increases with linear density, meaning that the fog's density is directly proportional to the distance from the camera. If
Note: As the distance increases, so does the density, and vice versa.
To initialize the Fog class, we can use the following constructor:
// Initialize fogconst fog = new THREE.Fog(color, near, far);// Add it to the scenescene.fog = fog;
The constructor takes the following parameters:
color: This is an integer that specifies the color of the fog. We can also specify it as a hexadecimal value.near: This is a floating-point variable that defines the minimum distance at which the fog will take effect.far: This is a floating-point variable that defines the maximum distance for fog interpolation.
Note: The fog is interpolated between the
nearandfardistances. Beyond thefarpoint, the effect of the fog remains constant.
The FogExp2 class
The FogExp2 class is designed to create fog that intensifies exponentially with distance. Unlike the Fog class, which relies on the near and far parameters, FogExp2 takes the fog's density as its primary parameter. The mathematical expression below illustrates how the fog's effect grows exponentially with distance:
This expression indicates that the fog becomes increasingly dense as the distance from the camera increases. Here's the syntax for the FogExp2 class constructor and how to use it within our scene:
// Initialize the fogconst fog = new THREE.FogExp2(color, density);// Add it to the scenescene.fog = fog;
The constructor accepts two arguments:
color: This integer specifies the color of the fog. We can use the hexadecimal notation as well, such as,0xcccccc.density: This floating-point variable specifies the density of the fog, which grows exponentially with distance. Lower values for this parameter result in a slower rate of an increase in fog density as the distance from the camera increases.
Demonstration
The code below has a basic three.js scene set up with a primitive and light.
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
const renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
const controls = new OrbitControls( camera, renderer.domElement );
camera.position.z = 30;
const directionalLight = new THREE.DirectionalLight( 0xffffff, 0.5 );
scene.add( directionalLight );
// const fog = new THREE.Fog( 0xcccccc, 5, 40 );
const fog = new THREE.FogExp2( 0xcccccc, 0.005 );
scene.fog = fog;
const geometry = new THREE.SphereGeometry( 15, 32, 16 );
const material = new THREE.MeshPhongMaterial( { color: 0xffaa23 } );
const sphere = new THREE.Mesh( geometry, material ); scene.add( sphere );
function animate() {
requestAnimationFrame( animate );
renderer.render( scene, camera );
}
animate();Note: You can pan around the scene in the application above and use the scroll action to zoom in and out to see the fog take effect. It is also important to note that there can only be one type of fog inside the scene. You can uncomment and comment the fog of your choice in the code above.
Line 19: This line initializes the
Foginstance for the scene. We can uncomment it and run the code to see it take effect.Line 20: The scene uses
FogExp2by default. When we run the code, we're able to see the effect this class has on the scene.
Conclusion
Adding fog effects to scenes has many applications. One very important one is to removal of far away objects from the scene so that they are not rendered, saving computational resources. They can then be slowly brought into view as the player slowly approaches them. The fog is supposed to hide the objects as they are spawned in the scene to add a realistic effect. Other than this, fog can also be used to achieve a particular aesthetic in a scene. In this way, three.js empowers developers to create stunning web visualizations with ease
Free Resources