Selective Bloom not working in react function with vanilla js wrapped in useeffect

[BEBARK_BALOCH]

Hello guys,I’m beginner to three.js and after watching Solved-Threejs-Selective-Bloom topic i created a two layers and render it with using clear depth function and its not working ,my function is not rendering both layers at a same time.its render only the layer which i put in last.
I didn’t able to find any bug or typo ,so anybody can guide me where I’m lacking.
@Mugen87 @prisoner849 I’m expecting alot from you two guys as I read your whole answers to questions on this forum and you both almost resolved any issues.
I’m attaching my code and pictures too.

function Hexagon() {


  const ref = useRef();
  useEffect(() => {





    const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    // enabled by default
    camera.layers.enable(1);

  
    const renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setClearColor( 0x000000 );
    renderer.autoClear = false;
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);
    // container.appendChild(renderer.domElement);
    ref.current.appendChild(renderer.domElement);
    scene.background = new THREE.Color(0x00000);



    // Loading Hexagon Frame
    const loader = new GLTFLoader()
    loader.load(HexaFrame, function (glb) {
      console.log(glb)
      const root = glb.scene;
      root.castShadow = true;
      root.receiveShadow = true;
      scene.add(root);

    }, function (xhr) {
      console.log((xhr.loaded / xhr.total * 100) + "% loaded")
    }, function (error) {
      console.log('ann error')
    })




    // TEXT

    // var myloader = new FontLoader(); 
    // var font = myloader.parse(OpenSans); 
    // var textGeometry = new TextGeometry('Hello three.js!', 
    // { font: font, size: 1, height: 0.1, curveSegments: 20 });
    //  var textMaterial = new THREE.MeshBasicMaterial({ color: 0xF00000 }); 
    //  var textMesh = new THREE.Mesh(textGeometry, textMaterial);
    //   this.scene.add(textMesh);


    let loader1 = new FontLoader();
    loader1.load(OpenSans, (font) => {
      let xMid;
      let shapes = font.generateShapes("Sample Test", 100, 2);

      let textShape = new THREE.BufferGeometry();
      let geometry = new THREE.ShapeGeometry(shapes);
      geometry.computeBoundingBox();

      let material = new THREE.MeshBasicMaterial({
        color: 0xFFFFFF,
        transparent: true,
        opacity: 1,
        side: THREE.DoubleSide
      });

      xMid = -0.5 * (geometry.boundingBox.max.x - geometry.boundingBox.min.x);
      geometry.translate(xMid, 0, 0);

      textShape.fromGeometry(geometry);
      let mesh = new THREE.Mesh(textShape, material);
      mesh.position.set(-6.920, 3.00, 0);
      mesh.rotation.set(0, -90.00 * (Math.PI / 180), 0);
      scene.add(mesh);
      console.log(mesh);
    });

    const AmbientLight = new THREE.AmbientLight(0x404040);
    AmbientLight.position.set(0, 0, 0); // soft white Ambient
    scene.add(AmbientLight);


    const Texture1 = new THREE.TextureLoader().load(NaymerBlack, function (texture) {

      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      texture.offset.set(0, 0);
      texture.repeat.set(1, 1);

    });
    // immediately use the texture for material creation

    const material1 = new THREE.MeshStandardMaterial({
      color: 0xFFFFFF,
      side: THREE.DoubleSide,
      castShadow: true,
      emissive: 1,
      map: Texture1
    });

    const material2 = new THREE.MeshStandardMaterial({
      color: 0xFFFFFF,
      side: THREE.DoubleSide,
      castShadow: true,
      emissive: 1
    });

    const Texture3 = new THREE.TextureLoader().load(NaymerPink, function (texture) {

      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      texture.offset.set(0, 0);
      texture.repeat.set(1, 1);

    });
    const material3 = new THREE.MeshStandardMaterial({
      color: 0xFFFFFF,
      side: THREE.DoubleSide,
      castShadow: true,
      emissive: 1,
      map: Texture3
    });


    // const Texture4 = new THREE.TextureLoader().load(VideoScene, function (texture) {

    //   texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    //   texture.offset.set(0, 0);
    //   texture.repeat.set(1, 1);

    // });

    const video = document.getElementById( 'video' );
    video.play()
     const texture5 = new THREE.VideoTexture( video );

    // immediately use the texture for material creation
    const material4 = new THREE.MeshBasicMaterial({
      color: 0xFFFFFF,
      side: THREE.FrontSide,
      castShadow: true,
      toneMapped:false,
      map: texture5,
    });

    const material5 = new THREE.MeshStandardMaterial({
      color: 0xFFFFFF,
      side: THREE.DoubleSide,
      castShadow: true,
      emissive: 1
    });



    const material6 = new THREE.MeshStandardMaterial({
      color: 0xFFFFFF,
      side: THREE.DoubleSide,
      castShadow: true,
      emissive: 1
    });

    const Circlematerial = new THREE.MeshBasicMaterial({
      color: 0xfffcaf,
      side: THREE.DoubleSide,
      castShadow: true,
      emissive: 1
    });

    const ParisLogoTexture = new THREE.TextureLoader().load(Paris, function (texture) {

      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      texture.offset.set(0, 0);
      texture.repeat.set(1, 1);

    });
    const ParislogoMat = new THREE.MeshBasicMaterial({
      color: 0xFFFFFF,
      castShadow: true,
      emissive: 1,
      map: ParisLogoTexture,
    });

    const BrazilLogoTexture = new THREE.TextureLoader().load(Brazil, function (texture) {

      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      texture.offset.set(0, 0);
      texture.repeat.set(1, 1);

    });
    const BrazillogoMat = new THREE.MeshBasicMaterial({
      color: 0xFFFFFF,
      castShadow: true,
      emissive: 1,
      map: BrazilLogoTexture,
    });



    //bloom renderer
    const renderScene = new RenderPass(scene, camera);
    const effectFXAA = new ShaderPass(FXAAShader)
    effectFXAA.uniforms.resolution.value.set(1 / window.innerWidth, 1 / window.innerHeight)

    
    const bloomPass = new UnrealBloomPass(
      new THREE.Vector2(window.innerWidth, window.innerHeight),
      1.5,
      0.4,
      0.85
    );
    bloomPass.threshold = 0;
    bloomPass.strength = 1; //intensity of glow
    bloomPass.radius = 1;
    bloomPass.renderToScreen = true;

    const bloomComposer = new EffectComposer(renderer);
    bloomComposer.setSize(window.innerWidth, window.innerHeight);

    const glitchPass = new GlitchPass();
    bloomComposer.addPass(glitchPass);
    bloomComposer.addPass(renderScene);
    bloomComposer.addPass(effectFXAA);
    bloomComposer.addPass(bloomPass);

    renderer.gammaInput = true
    renderer.gammaOutput = true
    renderer.toneMappingExposure = Math.pow(0.9, 4.0)




    // Creating a group for Hexagon
    const SolidHexagon = new THREE.Group();
    scene.add(SolidHexagon);
    //  sidewallgeometry
    const sidewallgeometry = new THREE.PlaneGeometry(8, 6);
    // const material = new THREE.MeshBasicMaterial( {color: 0xffff00, side: THREE.DoubleSide} );

    // Segment1
    const Segment1 = new THREE.Mesh(sidewallgeometry, material1);
    // Segment1.layers.set(1);
    SolidHexagon.add(Segment1);
    Segment1.position.set(-6.920, 3.00, 0);
    Segment1.rotation.set(0, -90.00 * (Math.PI / 180), 0);



    // Segment2
    const Segment2 = new THREE.Mesh(sidewallgeometry, material2);
    SolidHexagon.add(Segment2);
    Segment2.position.set(-3.476, 3, -6.000);
    Segment2.rotation.set(0, 30 * (Math.PI / 180), 0);



    // Segment3
    const Segment3 = new THREE.Mesh(sidewallgeometry, material3);
    SolidHexagon.add(Segment3);
    Segment3.position.set(3.477, 3, 6.000);
    Segment3.rotation.set(-180.00 * (Math.PI / 180), -30 * (Math.PI / 180), -180.00 * (Math.PI / 180));



    // Segment4
    const Segment4 = new THREE.Mesh(sidewallgeometry, material4);
    SolidHexagon.add(Segment4);
    Segment4.position.set(6.920, 3.00, 0);
    Segment4.rotation.set(0, 90.00 * (Math.PI / 180), 0);



    // Segment5
    const Segment5 = new THREE.Mesh(sidewallgeometry, material5);
    Segment5.layers.set(0);
    SolidHexagon.add(Segment5);
    Segment5.position.set(3.476, 3, -6.000);
    Segment5.rotation.set(0, -30 * (Math.PI / 180), 0);




    // Segment6
    const Segment6 = new THREE.Mesh(sidewallgeometry, material6);
    SolidHexagon.add(Segment6);
    Segment6.position.set(-3.477, 3, 6.000);
    Segment6.rotation.set(-180.00 * (Math.PI / 180), 30 * (Math.PI / 180), -180.00 * (Math.PI / 180));


    // Circle on Brazil wall logo
    const GlowCircle = new THREE.CylinderGeometry(2.50, 2.50, 0.30, 50);
    const BrazilCircle = new THREE.Mesh(GlowCircle, Circlematerial);
    BrazilCircle.layers.set(1);
    SolidHexagon.add(BrazilCircle);
    BrazilCircle.position.set(3.477, 3, -6.200);
    BrazilCircle.rotation.set(0 * (Math.PI / 180), 60 * (Math.PI / 180), 90 * (Math.PI / 180));

    const LogoCircleGeo = new THREE.CylinderGeometry(2.50, 2.50, 0, 50);
    const LogoCircleBrazil = new THREE.Mesh(LogoCircleGeo, BrazillogoMat);
    SolidHexagon.add(LogoCircleBrazil);
    LogoCircleBrazil.position.set(3.6, 3, -6.400);
    LogoCircleBrazil.rotation.set(0 * (Math.PI / 180), 240 * (Math.PI / 180), 90 * (Math.PI / 180));


    // Circle on Paris wall logo

    const Circle = new THREE.Mesh(GlowCircle, Circlematerial);
    Circle.layers.set(1);
    SolidHexagon.add(Circle);
    Circle.position.set(-3.477, 3, 6.200);
    Circle.rotation.set(0 * (Math.PI / 180), 60 * (Math.PI / 180), 90 * (Math.PI / 180));




    const LogoCircle = new THREE.Mesh(LogoCircleGeo, ParislogoMat);
    SolidHexagon.add(LogoCircle);
    LogoCircle.position.set(-3.6, 3, 6.450);
    LogoCircle.rotation.set(0 * (Math.PI / 180), 60 * (Math.PI / 180), 90 * (Math.PI / 180));








    //    HexagonGeometry
    const Hexagongeometry = new THREE.CylinderGeometry(8, 8, 0, 6);

    // const Hexagonmaterial = new THREE.MeshStandardMaterial({ color: 0xFFFFFF });


    const HexaTopTexture = new THREE.TextureLoader().load(Logo, function (texture) {

      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      texture.offset.set(0, 0);
      texture.repeat.set(1, 1);

    });
    // immediately use the texture for material creation
    const HexaTopMaterial = new THREE.MeshStandardMaterial({ map: HexaTopTexture });

    const HexaBottomTexture = new THREE.TextureLoader().load(Finisher, function (texture) {

      texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
      texture.offset.set(0, 0);
      texture.repeat.set(1, 1);

    });
    // immediately use the texture for material creation
    const HexaBottomMaterial = new THREE.MeshStandardMaterial({ map: HexaBottomTexture });


    //    HexagonTopWall
    const HexaTop = new THREE.Mesh(Hexagongeometry, HexaTopMaterial);
    // HexaTop.layers.enable(1);
    SolidHexagon.add(HexaTop);
    HexaTop.position.set(0, 6, 0);
    HexaTop.rotation.set(0, 0, 0);

    //    HexagonBottomWall
    const HexaBottom = new THREE.Mesh(Hexagongeometry, HexaBottomMaterial);
    // HexaBottom.layers.enable(1);
    SolidHexagon.add(HexaBottom);
    HexaBottom.position.set(0, 0, 0);
    HexaBottom.rotation.set(0, 0, 0);







    const directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
    directionalLight.position.set(4, 6, 0); //default; directionalLight shining from top
    directionalLight.castShadow = true;
    directionalLight.receiveShadow = false; //default
    scene.add(directionalLight);

    // Create a PointLight and turn on shadows for the light
    const light = new THREE.PointLight(0xffffff, 1.00, 100);
    light.position.set(21.676, 15.554, -6.130);
    light.castShadow = true; // default false
    scene.add(light);


    const width = 10;
    const height = 10;
    const intensity = 1;
    const rectLight = new THREE.RectAreaLight(0xffffff, intensity, width, height);
    rectLight.position.set(0, 10, 15);
    rectLight.lookAt(0, 0, 0);
    scene.add(rectLight)

    // const rectLightHelper = new RectAreaLightHelper(rectLight);
    // rectLight.add(rectLightHelper);


    camera.position.x = -.5;
    camera.position.y = 4.580;
    camera.position.z = 25.6;

    camera.rotation.x = 0 * (Math.PI / 180);
    camera.rotation.y = 0 * (Math.PI / 180);
    camera.rotation.z = 0 * (Math.PI / 180);











    const controls = new OrbitControls(camera, renderer.domElement);
    //resize listner
    // window.addEventListener(
    //   "resize",
    //   () => {
    //     camera.aspect = window.innerWidth / window.innerHeight;
    //     camera.updateProjectionMatrix();
    //     renderer.setSize(window.innerWidth, window.innerHeight);
    //     bloomComposer.setSize(window.innerWidth, window.innerHeight);
    //   },
    //   false
    // );



    const animate = () => {
      requestAnimationFrame(animate);
      texture5.needsUpdate=true;
      
      SolidHexagon.rotation.y += 0.001;
      renderer.clear();

      camera.layers.set(1);
      bloomComposer.render();
     
      renderer.clearDepth();

     

      camera.layers.set(0);
      renderer.render(scene, camera);
     
    };


    animate();



  });
  return (
  <>
    <video id="video"  src={neymarskills} loop  crossOrigin="anonymous" playsInline muted style={{display:"none"}}>
 
  </video>

    <div ref={ref} />
    </>  
  )
}

export default Hexagon```

[drcmda]

imo this is not how you use bloom. you don’t need to use layers. bloom is selective ootb, and just like in blender you control it with emissiveIntensity on your materials.

// The following 2 lines should be in any threejs project w/o exception
THREE.ColorManagement.legacyMode = false
...
renderer.outputEncoding = THREE.sRGBEncoding
renderer.toneMapping = THREE.ACESFilmicToneMapping
...
const target = new THREE.WebGLRenderTarget(width, height, {
  type: THREE.HalfFloatType,
  format: THREE.RGBAFormat,
  encoding: THREE.sRGBEncoding,
})
target.samples = 8
const composer = new EffectComposer(renderer, target)
composer.addPass(new RenderPass(scene, camera))
composer.addPass(new UnrealBloomPass(undefined, 1, 1, 1))

// This mesh will glow, everything else won't
const mesh = new THREE.Mesh(
  geometry,
  new THREE.MeshStandardMaterial({
    toneMapped: false,
    emissive: "red",
    emissiveIntensity: 10
  })
)

// This mesh will also glow, because it goes beyond 0-1 color space
const mesh = new THREE.Mesh(
  geometry,
  new THREE.MeshBasicMaterial({ toneMapped: false, color: new THREE.Color().setRGB(10, 10, 10) })
)

i think you also shouldn’t stick three into a useEffect, that’s not what react is for. you would use three-fiber for the same reason why you’re using react-dom for the dom, both are react renderers. by mixing imperative three and declarative react all you get is lack of integration (suspense, loading, events, state, eco system etc).

here are a couple of examples with bloom, both with three/jsm/pp and pmndrs/pp

Diamond ring - CodeSandbox

bloom hdr workflow - CodeSandbox

Building dynamic envmaps - CodeSandbox

[BEBARK_BALOCH]

I turned bloom threshold to 1 and then material emisiveintensity to 10 and tonemapped:false but still it didn’t work.
Can’t you fix my this code because rightnow it is not possible to me convert this whole code to react.
and please suggest me three.js course for advance tricks and code.

[drcmda]

this is not enough. you need the webgl render target. just copy the code above and it’ll work. the color spaces probably matter as well, basically everything in the code i posted is part of it.

[BEBARK_BALOCH]

Sorry @drcmda I didn’t get it, can you append yours code in mine and update it as I’m not getting that where to paste it.