Created
September 18, 2024 17:33
-
-
Save jelling/f2974011ae1dce107f7aba1406a7795b to your computer and use it in GitHub Desktop.
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.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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; | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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