threejs-postprocessing
Dodaj efekty wizualne do scen Three.js – bloom, rozmycie, color grading i custom shadery
Instalacja
Wybierz klienta i sklonuj repozytorium do odpowiedniego katalogu skilli.
Instalacja
O skillu
Umiejętność post-processingu dla Three.js. Zarządzaj efektami wizualnymi za pomocą EffectComposer – dodawaj bloom, depth of field, rozmycie, glow i niestandardowe shadery screen-space. Idealna do tworzenia zaawansowanych efektów graficznych, color gradingu i customowych efektów ekranowych w aplikacjach 3D.
Jak używać
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.