三个 js EffectComposer + BloomPass 不工作答案

【问题标题】：Three js EffectComposer + BloomPass not working三个 js EffectComposer + BloomPass 不工作
【发布时间】：2017-04-26 03:53:02
【问题描述】：

我这辈子都无法弄清楚出了什么问题（尤其是这两个 .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: Cannot read property 'prototype' of undefined at BloomPass.js:76”BloomPass 76 行如下：

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

我相信由于这个原因，EffectComposer 也会为 composer.addPass(effectBloom); 线： Uncaught TypeError: pass.setSize is not a function at THREE.EffectComposer.addPass

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

知道我做错了什么吗？根据几个例子，我正在正确设置一切...... 非常感谢任何帮助！

【问题讨论】：

另外提一下，如果我在代码中注释掉所有这些行并运行它，BloomPass.js 仍然会抛出该错误，让我怀疑它是否有问题？
如果您设置fiddle，会更容易为您提供帮助。你可以 fork This fiddle 来创建你自己的。

标签： javascript three.js post-processing bloom

【解决方案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);

【讨论】：