Hello. I am using Nextjs with React Three Fiber. I wanted to add a Bloom effect, so I used @react-three/postprocessing for that, but when I add Bloom to the scene, it doesn’t look good. It doesn’t care about the color of the emission, it is always white and it looks blocky. Kinda like in this example: https://pqrpl.csb.app/ I tried to play with the settings, but I can’t figure out what is the problem.
The Noise is weird as well. It looks kinda good, but then I set the Blending to THREE.AdditiveBlending and it looks glitchy anytime I scroll.
My code:
const Three = () => {
return (
<Canvas>
{/**@ts-ignore */}
<color attach="background" args={[0, 0, 0]} />
<Suspense fallback={null}>
<ambientLight />
<mesh position={[2, -3, 0]} scale={0.6}>
<sphereBufferGeometry attach="geometry" />
{/**@ts-ignore */}
<meshStandardMaterial
attach="material"
color="#571bff"
emissive="#571bff"
emissiveIntensity={200}
/>
</mesh>
</Suspense>
<EffectComposer>
<Bloom
luminanceThreshold={0}
luminanceSmoothing={0.9}
height={400}
opacity={3}
></Bloom>
<Noise opacity={0.01} blendFunction={THREE.AdditiveBlending} />
</EffectComposer>
</Canvas>
);
};
export default Three;
I would be very grateful if any of you could help me solve at least one of these issues.