三js EffectComposer + BloomPass无法正常工作

时间:2017-02-20 10:21:09

标签: javascript three.js post-processing bloom

不能为我的生活弄清楚什么是错的(特别是这两个.js文件没有记录)但我已经在我的项目中包含了EffectComposer和BloomPass,我试图把它称为这样:

parameters = { bloomStrength: 1.3, bloomFactor: 1.0,}

            var renderPass = new THREE.RenderPass(scene, camera);
            var copyPass = new THREE.ShaderPass(THREE.CopyShader);
            copyPass.renderToScreen = true;

            composer = new THREE.EffectComposer ( renderer );
            composer.addPass(renderPass);
            composer.addPass(copyPass);

            var effectBloom = new THREE.BloomPass ( 3, 25, 5, 256);
            composer.addPass (effectBloom);

BloomPass.js会自行抛出一个错误(不在我的代码中),说明" Uncaught TypeError:无法读取属性' prototype'在BloomPass.js中未定义:76" BloomPass 76行如下:

THREE.BloomPass.prototype = Object.assign( Object.create( THREE.Pass.prototype ), {

我相信由于这个原因,EffectComposer也会抛出一个错误 composer.addPass(effectBloom);行: 未捕获的TypeError:pass.setSize不是THREE.EffectComposer.addPass中的函数

pass.setSize( size.width, size.height );

知道我做错了什么吗?根据几个例子,我正确地设置了一切...... 非常感谢任何帮助!

1 个答案:

答案 0 :(得分:1)

你应该将CopyShader放在作曲家的末尾而不是中间。这段代码适合我:

    renderer.autoClear = false;
    composer = new THREE.EffectComposer(renderer);
    var sunRenderModel = new THREE.RenderPass(scene, camera);
    var effectBloom = new THREE.BloomPass(1, 25, 5);
    var sceneRenderModel = new THREE.RenderPass(scene, camera);
    var effectCopy = new THREE.ShaderPass(THREE.CopyShader);
    effectCopy.renderToScreen = true;
    composer.addPass(sunRenderModel);
    composer.addPass(effectBloom);
    composer.addPass(effectCopy);