threejs-postprocessing
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
Installation
Pick a client and clone the repository into its skills directory.
Installation
About this skill
Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
How to use
Zaimportuj EffectComposer i RenderPass z biblioteki Three.js addons. Utwórz nową instancję EffectComposer, przekazując renderer jako argument.
Dodaj RenderPass jako pierwszy pass – będzie on renderować Twoją scenę i kamerę. Użyj composer.addPass(renderPass) aby dodać go do composera.
Importuj wybrany efekt, na przykład UnrealBloomPass dla efektu glow. Skonfiguruj parametry: strength (siła efektu), radius (zasięg rozmycia) i threshold (próg jasności dla bloom).
Dodaj efekt do composera za pomocą composer.addPass(bloomPass). Jeśli to ostatni pass, ustaw bloomPass.renderToScreen = true aby wynik pojawił się na ekranie.
W pętli animacji zamień renderer.render() na composer.render() – to zapewni, że wszystkie passes będą wykonane w poprawnej kolejności.
Obsłuż zmianę rozmiaru okna: w event listenere resize zaktualizuj rozmiar composera za pomocą composer.setSize(width, height) oraz dostosuj kamerę i renderer.