如何在three.js中添加bokehShader

在本例中，我是将bokeh效果添加到场景中的着色器。但我无法让它工作。但是，当我在控制台中检查时，似乎没有错误。这是我的代码（main.js）。我已经包含了示例中的ShaderExtras.js，并将其添加到index.html中

$(document).ready(function(){

    pposx = window.innerWidth/2;
    pposy = window.innerHeight/2;

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(70, window.innerWidth/window.innerHeight, 0.1, 10000 );
    camera.lookAt(scene.position);

    camera.position.x = 0;
    camera.position.y = 0;
    camera.position.z = 5;

    var renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setClearColor( 0xffffff );

    $("body").append(renderer.domElement);

    var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
    directionalLight.position.set( 0, 0, -4 );
    directionalLight.rotation.x = (Math.PI/180)*180;
    directionalLight.rotation.y = (Math.PI/180)*180;

    var directionalLight1 = new THREE.DirectionalLight( 0xffffff, 0.7 );
    directionalLight1.position.set( 0, 0, 4 );

    var directionalLight2 = new THREE.DirectionalLight( 0xffffff, 0.7 );
    directionalLight2.position.set( -3, 0, 0 );

    var directionalLight3 = new THREE.DirectionalLight( 0xffffff, 0.7 );
    directionalLight3.position.set( 3, 0, 0 );

    scene.add( directionalLight, directionalLight1, directionalLight2, directionalLight3 );

    material1 = new THREE.MeshPhongMaterial( { color: 0xff00ff, specular: 0xff00ff, shininess: -3, shading: THREE.FlatShading, side: THREE.FrontSide } );

    ge = [];
    for(j=0;j<100;j++){
        ge[j] = new THREE.BoxGeometry( 1, 1, 1 );
        ge[j] = new THREE.Mesh( ge[j], material1 );
        ge[j].position.z = -50 + j*2;
        scene.add( ge[j] );
    }

    $(document).mousemove(function(e){
        pposx = e.clientX;
        pposy = e.clientY;
    });

    function initPostprocessing() {

                postprocessing.scene = new THREE.Scene();

                postprocessing.camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2,  window.innerHeight / 2, window.innerHeight / - 2, -100, 100 );
                postprocessing.camera.position.z = 5;

                var pars = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
                postprocessing.rtTextureDepth = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );
                postprocessing.rtTextureColor = new THREE.WebGLRenderTarget( window.innerWidth, window.innerHeight, pars );

                var bokeh_shader = THREE.ShaderExtras[ "bokeh" ];

                postprocessing.bokeh_uniforms = THREE.UniformsUtils.clone( bokeh_shader.uniforms );

                postprocessing.bokeh_uniforms[ "focus" ].value = 1;
                postprocessing.bokeh_uniforms[ "aperture" ].value = 0.2;
                postprocessing.bokeh_uniforms[ "maxblur" ].value = 3;

                postprocessing.bokeh_uniforms[ "tColor" ].texture = postprocessing.rtTextureColor;
                postprocessing.bokeh_uniforms[ "tDepth" ].texture = postprocessing.rtTextureDepth;
                postprocessing.bokeh_uniforms[ "focus" ].value = 0.1;
                postprocessing.bokeh_uniforms[ "aspect" ].value = window.innerWidth / window.innerHeight;

                postprocessing.materialBokeh = new THREE.ShaderMaterial( {

                    uniforms: postprocessing.bokeh_uniforms,
                    vertexShader: bokeh_shader.vertexShader,
                    fragmentShader: bokeh_shader.fragmentShader

                } );

                postprocessing.quad = new THREE.Mesh( new THREE.PlaneGeometry( window.innerWidth, window.innerHeight ), postprocessing.materialBokeh );
                postprocessing.quad.position.z = -1;
                postprocessing.scene.add( postprocessing.quad );

            }

    function render() {
        requestAnimationFrame( render );

        camera.rotation.y = (Math.PI/180)*((pposx - (window.innerWidth/2))/1000*180);

        camera.position.x = (5*Math.sin((Math.PI/180)*((pposx - (window.innerWidth/2))/1000*180)));
        camera.position.y = (pposy - (window.innerHeight/2))/100;
        camera.position.z = (5*Math.cos((Math.PI/180)*((pposx - (window.innerWidth/2))/1000*180)));

        renderer.render(scene, camera);
    };
    var postprocessing = { enabled  : true };
    initPostprocessing();
    render();

   });

$（文档）.ready（函数（）{
ppox=窗内宽度/2；
pposy=窗内高度/2；
var scene=new THREE.scene（）；
var摄像机=新的三透视摄像机（70，window.innerWidth/window.innerHeight，0.11000）；
摄像机。注视（场景。位置）；
摄像机位置x=0；
摄像机位置y=0；
摄像机位置z=5；
var renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
renderer.setClearColor（0xffffff）；
$（“body”）.append（renderer.domeElement）；
var directionalLight=新的三个方向灯（0xffffff，0.7）；
方向灯。位置。设置（0，0，-4）；
方向光.rotation.x=（Math.PI/180）*180；
方向光.rotation.y=（数学PI/180）*180；
var directionalLight1=新的三个方向光（0xffffff，0.7）；
方向灯1.位置设置（0,0,4）；
var directionalLight2=新的三个方向光（0xffffff，0.7）；
方向灯2.位置设置（-3,0,0）；
var directionalLight3=新的三个方向灯（0xffffff，0.7）；
方向灯3.位置设置（3,0,0）；
添加（方向光、方向光1、方向光2、方向光3）；
material1=新的三点网格材质（{颜色：0xff00ff，镜面反射：0xff00ff，光泽度：-3，着色：三点平面着色，侧面：三点正面}）；
ge=[]；
对于（j=0；j再看一看链接到的示例的渲染函数，它看起来与渲染函数有很大的不同。不，即使我添加renderer.render（postprocessing.scene，postprocessing.camera）；在渲染函数中，它也没有帮助。不同的代码不止一行。