Learn Three.js - Third Edition

Advanced pass - Bokeh

With the THREE.BokehPass, you can add a Bokeh effect to your scene. In a Bokeh effect, only part of the scene is in focus, and the rest of the scene looks blurry. To see this effect in action, you can open example 05-bokeh.html:

When you open it, initially, the whole seen will look blurry. With the Bokeh controls on the right, you can set the focus value to the part of the scene that you want to have in focus, and play around with the aperture property to determine the size of the area that should be in focus.  By sliding the focus, you can have the sphere in the foreground in focus, as follows:

Or, if we slide it further, ...