Three.js Postprocessing renderer

Good day.

Working with post-processing bloom.
the question is that the glow effect itself only works with background of the render. but I have a floor that is a different color and should have a glow on it too.

What do you mean by “floor” :thinking: ?

[…] glow effect itself only works with background of the render […]

I might be wrong, but that’s a requirement for other renderers as well (ex. Blender will also not render glow on transparent pixels.) These pixels are simply discarded.

another object. in my case it is planegeometry, but it may be simple scene.background.

import { BloomEffect, EffectComposer, EffectPass, RenderPass} from "postprocessing";
import { Clock } from "three";

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera( 45, window.innerWidth/window.innerHeight, 0.1, 1000 );
scene.background = new THREE.Color(0x130135);

let renderer = new THREE.WebGLRenderer({antialias:true

renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0x130135 );

let doc = document.querySelector('.main');
doc.appendChild( renderer.domElement );

window.addEventListener('resize', function () {
     let width = window.innerWidth;
     let height = window.innerHeight;
     camera.aspect = width / height;

let controls = new  THREE.OrbitControls(camera,renderer.domElement);

const geometry = new THREE.SphereGeometry( 5, 32, 32 );
const material = new  THREE.MeshBasicMaterial({ color: "red", wireframe: false,});
const mesh = new THREE.Mesh(geometry,material);


const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, new BloomEffect({
     luminanceThreshold: 0.0,
     luminanceSmoothing: 0.0,
     height: 100

const clock = new Clock();
camera.position.z = 20;

const animate = function () {
     requestAnimationFrame( animate );

     renderer.render( scene, camera );