Fog Effect in WebVR Using Three.js

Fog Effect in WebVR

In this tutorial, we’ll create fog effect in VR. We’ll also create a scene with a floor and objects in it so that we can view the fog effect more clearly.

This is part of #DaysInVR series. View All VR Projects.

Yesterday, we learnt how to create transition in WebVR. Today we’ll see how to create fog effect in WebVR.

Join 6000+ Students

Upgrade your programming skills to include Virtual Reality. A premium step-by-step training course to get you building real world Virtual Reality apps and website components. You’ll have access to 40+ WebVR & Unity lessons along with their source code.

Start Learning Now

150$ for all 3 courses (SAVE 70%)

Adding fog effect using three.js is easy. Fog effect is built into the core of three.js! We’ll use FogExp2 to create the fog. In FogExp2, the fog grows exponentially. There’s also THREE.Fog which grows the fog linearly.


var scene = new THREE.Scene();
scene.fog = new THREE.FogExp2(0xefd1b5, 0.015);

var scene = new THREE.Scene();

scene.fog = new THREE.FogExp2(0xefd1b5, 0.015);

The second parameter of FogExp2 is the density of the fog and the first parameter is the color.

Adding PlaneGeometry and Objects in WebVR

We’ll use PlaneGeometry to create a grass ground and add objects around the ground. We’ll move around the ground and objects so that the fog effect can be noticed more clearly.

We’ll one plane for the grass and another one for the objects. Then we’ll move the planes in z direction to simulate and moving around effect.


var floorTexture = loader.load('grass1.jpg');
floorTexture.wrapS = THREE.RepeatWrapping;
floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(160, 160);

var planeGeometry = new THREE.PlaneGeometry(1000, 1000);
var planeMaterial = new THREE.MeshPhongMaterial({ color: 0xFFFFFF, map: floorTexture });
var plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.receiveShadow = true;
plane.rotation.x = -0.5 * Math.PI;
plane.position.set(0, -5, -400);
scene.add(plane);

var floorTexture = loader.load('grass1.jpg');

floorTexture.wrapS = THREE.RepeatWrapping;

floorTexture.wrapT = THREE.RepeatWrapping;

floorTexture.repeat.set(160, 160);

var planeGeometry = new THREE.PlaneGeometry(1000, 1000);

var planeMaterial = new THREE.MeshPhongMaterial({ color: 0xFFFFFF, map: floorTexture });

var plane = new THREE.Mesh(planeGeometry, planeMaterial);

plane.receiveShadow = true;

plane.rotation.x = -0.5 * Math.PI;

plane.position.set(0, -5, -400);

scene.add(plane);


var planeObjectGeometry = new THREE.PlaneGeometry(2000, 2000);
var planeObjectMaterial = new THREE.MeshPhongMaterial();
var planeObject = new THREE.Mesh(planeObjectGeometry, planeObjectMaterial);
planeObject.receiveShadow = true;
planeObject.position.set(0, -5, -400);
scene.add(planeObject);

var planeObjectGeometry = new THREE.PlaneGeometry(2000, 2000);

var planeObjectMaterial = new THREE.MeshPhongMaterial();

var planeObject = new THREE.Mesh(planeObjectGeometry, planeObjectMaterial);

planeObject.receiveShadow = true;

planeObject.position.set(0, -5, -400);

scene.add(planeObject);

We’ll add the following code to animate function for moving the scene around.


var delta = clock.getDelta();
plane.position.z += 4 * delta;
planeObject.position.z += 4 * delta;

var delta = clock.getDelta();

plane.position.z += 4 * delta;

planeObject.position.z += 4 * delta;

VREffect and VRControls

We’re using VREffect and VRControls for making it work in VR.


var effect = new THREE.VREffect(renderer);
effect.setSize(window.innerWidth, window.innerHeight);

var effect = new THREE.VREffect(renderer);

effect.setSize(window.innerWidth, window.innerHeight);


var controls = new THREE.VRControls(camera);
controls.standing = true;
camera.position.y = controls.userHeight;

var controls = new THREE.VRControls(camera);

controls.standing = true;

camera.position.y = controls.userHeight;

Check the full source to see how it all fits together.

Its your turn

Try adding fog effect to your scene. Try changing the color and density and see how it affects your scene. Don’t forget to share your experiences below in the comments.

Download Source Code

Kickstart VR development by downloading source code for this project. You’ll have instant access to source code and asset files. You can use them in your personal or commercial projects.

Download Source Code

Get instant access for $39

Fog Effect in WebVR Using Three.js