Fog Effect in WebVR Using Three.js

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.

Demo | Source

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.

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.

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.

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

VREffect and VRControls

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

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.

Leave a Reply

Send Lesson #1
Join 1000s of VR Developers

Build your Career in VR with this 6 part FREE course

Send Lesson #1
Join 1000s of VR Developers

We've build a simple curriculum to help you get started in VR

Send Lesson #1