Wraps ThreeJS Post-processing effects so they can be used declaratively in React-Three-Fiber. I need this because I was having build related issues with the `@react-three/postprocessing` library.

ThreeEffects.tsx

import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer';
import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass';
import { DotScreenPass } from 'three/examples/jsm/postprocessing/DotScreenPass';
import { RenderPixelatedPass } from 'three/examples/jsm/postprocessing/RenderPixelatedPass.js';
import { OutlinePass } from 'three/examples/jsm/postprocessing/OutlinePass';
import { UnrealBloomPass } from 'three/examples/jsm/postprocessing/UnrealBloomPass';
import { Canvas, extend, Object3DNode, useFrame, useThree } from '@react-three/fiber';
import { Vector2 } from 'three';
import { useRef, useEffect } from 'react';

extend({
  RenderPass,
  EffectComposer,
  OutlinePass,
  DotScreenPass,
  RenderPixelatedPass,
  UnrealBloomPass,
});

declare global {
  namespace JSX {
    interface IntrinsicElements {
      outlinePass: Object3DNode<OutlinePass, typeof OutlinePass>;
      dotScreenPass: Object3DNode<DotScreenPass, typeof DotScreenPass>;
      renderPixelatedPass: Object3DNode<RenderPixelatedPass, typeof RenderPixelatedPass>;
      unrealBloomPass: Object3DNode<UnrealBloomPass, typeof UnrealBloomPass>;
    }
  }
}

// Uncomment the passes you want to use
export const ThreeEffects = () => {
  const { camera, gl, scene } = useThree();
  const composer = useRef<EffectComposer>();

  useEffect(() => {
    composer.current = new EffectComposer(gl);
    composer.current.addPass(new RenderPass(scene, camera));

    // const pixelatedPass = new RenderPixelatedPass(6, scene, camera);
    // composer.current.addPass(pixelatedPass);

    const bloomPass = new UnrealBloomPass(
      new Vector2(window.innerWidth, window.innerHeight),
      1.5,
      0.4,
      0.85
    );
    composer.current.addPass(bloomPass);

    // const dotScreenPass = new DotScreenPass(
    //   new Vector2(window.innerWidth, window.innerHeight),
    //   0.5,
    //   0.8
    // );
    // composer.current.addPass(dotScreenPass);

    // const outlinePass = new OutlinePass(new Vector2(window.innerWidth, window.innerHeight), scene, camera);
    // composer.current.addPass(outlinePass);

    // Resize the composer when the window size changes
    composer.current.setSize(window.innerWidth, window.innerHeight);
  }, [gl, scene, camera]);

  useFrame(() => {
    composer.current?.render();
  }, 1);

  return null;
};

WOW thanks for sharing this, is so fucking useful, works perfectly also, I just pressed Ctrl+V to paste the code and BOOM!, all my materials with emisive set and emissiveIntensity > 4 started to be shiny with bloom