/threex.depthoffield

three.js extension to provide a depth of field

MIT LicenseMIT

threex.depthoffield

Provide a tunable depth of field to your scene. It gives it a nice bokeh effect. It is very easy to include. Additionally there is a Dat.GUI helpers provided for interactive fine tuning.

Here is a basic example and its source.

How To Install It

You can install it manually. Just do

<script src='threex.depthoffield.js'></script>

You can install with bower.

bower install threex.depthoffield

then you add that in your html

<script src="bower_components/threex.depthoffield/threex.depthoffield.js"></script>

How To Use It ?

first you initialize it

var depthOfField= new THREEx.DepthOfField(renderer)

then you call this function everytime you want to render it

depthOfField.render(scene, camera)

Becareful with the camera far distance... it greatly affects the precision of the THREE.MeshDepthMaterial rendering. Keep it close to the minimum.