I encountered an issue while trying to implement post-processing effects.
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 find my full code here: https://pastebin.com/RPybJKfX
I am aiming to achieve a similar result as shown here: or if you have any other suggestions for creating a nebula or similar effect.
Thank you,