Three.js : add BloomEffect from Post processing

Question

I meet problem when i try to implement post processing

const renderer = new THREE.WebGLRenderer()
renderer.setSize(sizes.width, sizes.height)
document.body.appendChild(renderer.domElement)

const composer = new EffectComposer(renderer)
var bloomEffect = new BloomEffect();
const effectPass = new EffectPass(camera, bloomEffect);
effectPass.renderToScreen = true;

composer.addPass(effectPass);
effectPass.renderToScreen = true
/* Controls */

var controls = new OrbitControls( camera, renderer.domElemen );
controls.maxDistance = 50;
controls.minDistance = 0;

/**
* Loop
*/
const loop = () => {
    window.requestAnimationFrame(loop)

    //camera.position.x = cursor.x * 3
    //camera.position.y = - cursor.y * 3
    camera.lookAt(new THREE.Vector3())
    camera.updateMatrixWorld();

    controls.update();

    // Renderer
    //renderer.render(scene, camera)
    composer.render();
}
loop()

You can found my full code here : https://pastebin.com/RPybJKfX

I try to get this result https://vanruesc.github.io/postprocessing/public/demo/#bloom or if you have other solution for make this (i want to make nebula or something like that)

Thanks,

M - · Accepted Answer · 2019-01-22 21:29:04Z

1

You're missing the line

composer.addPass(new RenderPass(scene, camera));

You can see exactly how to implement the example you're referring to at this link: https://vanruesc.github.io/postprocessing/#usage

answered Jan 22, 2019 at 21:29

M -

28.7k12 gold badges56 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

M - Over a year ago

No problem! If the answer was helpful, make sure to accept it so others can see it in the future. :)

Collectives™ on Stack Overflow

Three.js : add BloomEffect from Post processing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related