Why there is no bloom effect in popping in my screen even though I follow the codes right.
So basically I’m trying to bloom effect all the lines and animated it but it doesn’t work as expected.
You can check at my code and I can’t find where the bloomEffect doesn’t work at.
let sceneItem = document.querySelector(".header .scene")
let scene,camera,renderer,renderScene,bloomPass,bloomComposer;
function mathRandomX(i = 100) {
var numValue = - Math.random() * i + Math.random() * i;
return numValue;
}
function mathRandomY(i = 10) {
var numValue = - Math.random() * i + Math.random() * i;
return numValue;
}
function createLines(i,xSize,ySize) {
let geoStar,matStar,meshStar
geoStar = new THREE.BoxGeometry(2,0.1,0.1)
matStar = new THREE.MeshLambertMaterial({color:0xfc0303, side:THREE.DoubleSide});
meshStar = new THREE.Mesh(geoStar, matStar);
meshStar.position.set(mathRandomX(),mathRandomY(),0)
scene.add(meshStar)
gsap.to(meshStar.position, {duration:3,x:0, repeat:-1, yoyo:true, delay:mathRandomX(3)});
}
init();
onWindowResize();
animate();
function init() {
scene = new THREE.Scene()
let bgColor = 0x000000;
scene.background = new THREE.Color(bgColor);
camera = new THREE.PerspectiveCamera(40, sceneItem.clientWidth / sceneItem.clientHeight, 1, 10000);
camera.position.set(0,0.5,20);
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio( window.devicePixelRatio );
renderer.toneMapping = THREE.ReinhardToneMapping;
renderer.toneMappingExposure = 1;
renderer.setSize(sceneItem.clientWidth, sceneItem.clientHeight);
sceneItem.appendChild(renderer.domElement);
// const controls = new OrbitControls( camera, renderer.domElement );
const params = {
exposure: 1,
bloomStrength: 2,
bloomThreshold: 1,
bloomRadius: 1
};
renderScene = new RenderPass( scene, camera );
bloomPass = new UnrealBloomPass( new THREE.Vector2( sceneItem.clientWidth, sceneItem.clientHeight ), 1.5, 0.4, 0.85 );
bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;
bloomComposer = new EffectComposer( renderer );
bloomComposer.renderToScreen = false;
bloomComposer.addPass( renderScene );
bloomComposer.addPass( bloomPass );
scene.add(new THREE.AmbientLight(0xffffff));
for (let i = 0; i < 50; i++) {
createLines(i,0.1,3)
}
}
function animate() {
requestAnimationFrame(animate);
// camera.lookAt(city.position);
renderer.render( scene, camera );
bloomComposer.render()
}
function onWindowResize() {
let w = sceneItem.clientWidth
let h = sceneItem.clientHeight
camera.aspect = w / h
camera.updateProjectionMatrix()
renderer.setSize(sceneItem.clientWidth,sceneItem.clientHeight)
}
as you see in animate() function there is a bloomComposer but its not working the bloom Effect…
did I miss anything? Anyone help thanks 