I followed a tutorial by Anderson Mancini (https://www.youtube.com/watch?v=er02gtD8asA&ab_channel=AndersonMancini-ThreejsJourney) and implemented most of the code accordingly. However, I modified the part where the tutorial traverses the scene to get the mesh; I use the getObjectByName function instead. As a result, the entire scene is getting the bloom effect, even though I only want the object named "bloom" to be affected.

The code below demonstrates my current setup. I load a GLTF model, set up the bloom effect using postprocessing, and then add only the object named "bloom" to the selection. My expectation is that only that object will have the bloom effect, but it appears the effect is applied scene-wide. Any help in configuring the selective bloom effect correctly would be appreciated.

JAVASCRIPTCopied
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
import { BloomEffect, EffectComposer, EffectPass, RenderPass, SelectiveBloomEffect } from "postprocessing";
import { Selection } from 'postprocessing';

//Initialising a scene and camera 
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
  50,
  window.innerWidth / window.innerHeight,
  0.1,
  1000
);

//initialising the renderer and inserting it into DOM element
const renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.type = THREE.VSMShadowMap;
document.body.appendChild(renderer.domElement);

//declaring shadown maps and tone mapping of the scene
renderer.shadowMap.enabled = true;
renderer.toneMapping = THREE.ACESFilmicToneMapping;
renderer.toneMappingExposure = 0.5;
renderer.setPixelRatio( window.devicePixelRatio );

/*const composer = new EffectComposer(renderer);
composer.addPass(new RenderPass(scene, camera));
composer.addPass(new EffectPass(camera, new BloomEffect()));*/

let model; // Declare the model variable at a higher scope

//loading the HDRI to the scene
const hdriLoader = new RGBELoader();
hdriLoader.load('../env1.hdr', (texture) => {
  const envMap = texture;
  envMap.mapping = THREE.EquirectangularReflectionMapping;
  envMap.exposure = 0.25;
  scene.environment = envMap;
  scene.background = new THREE.Color(0.5, 0.5, 0.5);<NL});

/*
const renderScene = new RenderPass(scene,camera);
const composer = new EffectComposer(renderer);
composer.addPass(renderScene);

const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth,window.innerHeight),
  1.6,
  0.1,
  0.1
);

composer.addPass(bloomPass);
*/

//loading the model using the GLTF loader 
const loader1 = new GLTFLoader();

const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/');
loader1.setDRACOLoader(dracoLoader);

let selectedobjectforbloom = new Selection();
const composer = new EffectComposer(renderer);
const renderpass = new RenderPass(scene,camera);

loader1.load(
  'interior_threejs.glb',
  function (gltf) {
    model = gltf.scene;
    model.position.set(0, 0.01, 0);
    model.traverse((child) => {
        if (child.isObject3D) child.castShadow = true;
      });
    // Assuming you've loaded the GLTF model into the scene and named the light in Blender as 'pointLight'

      // Traverse through the scene to find the light
      model.traverse((child) => {
       if (child.name === 'Spot') {
        // Access the punctual light
          const pointLight = child;8

           // Now you can access properties of the light
          console.log('Punctual light intensity:', pointLight.children[0].intensity);
          console.log('Punctual light color:', pointLight.children[0].color);
          console.log('Punctual light position:', pointLight.position);
    
    // You can also manipulate the light properties if needed
    // For example:
        pointLight.children[0].intensity = 25;
         //pointLight.color.set(0xff0000);
  }
  const scene1 = model.getObjectByName("Scene", true);
  scene1.receiveShadow = true;

  const object = model.getObjectByName( "Cube", true );
  object.receiveShadow = true;
  object.castShadow = true;

  const object1 = model.getObjectByName("Cube002",true)
  object1.receiveShadow = true;
  object1.castShadow = true;

  const object2 = model.getObjectByName( "Cube001_2", true );
  object2.receiveShadow = true;
  object2.castShadow = true;


  const selectiveBloom = new SelectiveBloomEffect(scene,camera, {
    intensity : 1.5,
    luminanceThreshold : 0.0001,
    mipmapblur : true,
    radius : .35,
  })
  
  selectiveBloom.selection =  selectedobjectforbloom;
  
  const obj = model.getObjectByName("bloom", true);
  selectedobjectforbloom.add(obj);
 
  composer.addPass(renderpass);
  composer.addPass(new EffectPass(camera, new BloomEffect(), selectiveBloom));

});

      scene.add(model);
      console.log(model);
      
    },
    undefined,
    function (error) {
      console.error('Error loading GLTF model:', error);
    }
  );
    /*
  let selectedobjectforbloom = new Selection();

  const selectiveBloom = new SelectiveBloomEffect(scene,camera, {
    intensity : 1.5,
    luminanceThreshold : 0.0001,
    mipmapblur : true,
    radius : .35,
  })
  
  selectiveBloom.selection =  selectedobjectforbloom;
  
  const obj = model.getObjectByName("bloom", true);
  selectedobjectforbloom.add(obj);

  const composer = new EffectComposer(renderer);
  const renderpass = new RenderPass(scene,camera);
  composer.addPass(renderpass);
  composer.addPass(new EffectPass(camera, bloom, selectiveBloom));*/

// Initialize ambient light
const ambientLight = new THREE.AmbientLight(0xffffff, 1); // Color: white, Intensity: 1
scene.add(ambientLight);


const directionalLight = new THREE.DirectionalLight(0xffffff,8);
directionalLight.position.set(-6.5,2.5,-1.5);
directionalLight.castShadow = true;
scene.add(directionalLight);

directionalLight.shadow.mapSize.width = 1024; // Shadow map width
directionalLight.shadow.mapSize.height = 1024; // Shadow map height
directionalLight.shadow.camera.near = 0.5; // Near plane of shadow camera
directionalLight.shadow.camera.far = 500; // Far plane of shadow camera
directionalLight.shadow.camera.left = -10; // Left boundary of shadow camera's frustum
directionalLight.shadow.camera.right = 10; // Right boundary of shadow camera's frustum
directionalLight.shadow.camera.top = 10; // Top boundary of shadow camera's frustum
directionalLight.shadow.camera.bottom = -10;
directionalLight.shadow.bias = 0; // Shadow bias
directionalLight.shadow.normalBias = 1; // Shadow normal bias
directionalLight.shadow.radius = 4; 
   
//orbit controls for the chair
const orbit = new OrbitControls(camera, renderer.domElement);
camera.position.set(0, 2, 3);
/*
// Set limits for rotation
orbit.minPolarAngle = 0; // radians
orbit.maxPolarAngle = 1.309; // radians

// Set limits for zoom
orbit.minDistance = 1;
orbit.maxDistance = 3;
*/
orbit.update();

//animate to render it realtime
function animate() {
    requestAnimationFrame(animate);
   // renderer.render(scene, camera);
    composer.render();
  }
  animate();