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

Questions
2

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