Styjun

I am working with npm and three.js. I've alrady installed the 'npm three postprocessing'.

I tried to let postprocessing works but I faild. eventthough I tried to copy the examples file by file but the problem still exist.

The problem is that if I add the effect after the renderScene to the composer(which should be the right order) then the screen show black screen. but if I change the order, I mean if I put the renderScene after the efffect then I can see the effect but it's not appiled to the Objects inside the render.

Moreover, the bloom effect is not working at all.

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 );