Question

我是这个示例中的着色器https://threejsdoc.appspot.com/doc/three.js/examples/webgl_postprocessing_dof.html，用于将散景效果添加到场景中。但我无法让它发挥作用。但是，当我在控制台中检查时似乎没有错误。这是我的代码（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();

   });

请将任何帮助使立方体显得模糊有用。

如何在three.js中添加一个bokehShader

0 个答案: