npm后处理无法正常工作

Question

我正在使用npm和three.js。我已经安装了'npm three postprocessing'。

我试图让后处理有效，但失败了。尽管我尝试逐个文件复制示例文件，但问题仍然存在。

问题是，如果我在renderScene之后将效果添加到作曲家（应该是正确的顺序），那么屏幕将显示黑屏。但是，如果更改顺序，我的意思是，如果将效果放置在renderScene之后，则可以看到效果，但该效果未应用于渲染器内部的Objects。

此外，绽放效果根本不起作用。

var clock = new THREE.Clock();
var container = document.getElementById( 'container' );
stats = new Stats();
//container.appendChild( stats.dom );
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.toneMapping = THREE.ReinhardToneMapping;
document.body.appendChild(renderer.domElement);

//container.appendChild( renderer.domElement );
scene = new THREE.Scene();
camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 100 );
camera.position.set( - 5, 2.5, - 3.5 );
scene.add( camera );
controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.maxPolarAngle = Math.PI * 0.5;
controls.minDistance = 1;
controls.maxDistance = 10;
scene.add( new THREE.AmbientLight( 0x404040 ) );
pointLight = new THREE.PointLight( 0xffffff, 1 );
camera.add( pointLight );
var renderScene = new THREE.RenderPass( scene, camera );
var bloomPass = new THREE.UnrealBloomPass( new THREE.Vector2( window.innerWidth, window.innerHeight ), 1.5, 0.4, 0.85 );
bloomPass.renderToScreen = true;
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;
composer = new THREE.EffectComposer( renderer );
composer.setSize( window.innerWidth, window.innerHeight );

const effectPass = new EffectPass(camera,new NoiseEffect(),new VignetteEffect(),new DotScreenEffect());



effectPass.renderToScreen = true;
composer.addPass( effectPass );
//composer.addPass( bloomPass );
composer.addPass( renderScene );