threejs-postprocessing

name	threejs-postprocessing
description	Three.js post-processing - EffectComposer, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
type	skill
created	2026-02-27T00:00:00.000Z
domain	design-creative
category	3d-animation
risk	unknown
source	community
tags	["skill","design-creative","3d-animation","threejs","postprocessing"]

Three.js Post-Processing

When to Use

• You need screen-space visual effects in a Three.js render pipeline.
• The task involves EffectComposer, bloom, depth of field, color grading, blur, or custom passes.
• You are enhancing the final rendered image rather than base scene setup alone.

Quick Start

import * as THREE from "three";
import { EffectComposer } from "three/addons/postprocessing/EffectComposer.js";
import { RenderPass } from "three/addons/postprocessing/RenderPass.js";
import { UnrealBloomPass } from "three/addons/postprocessing/UnrealBloomPass.js";

// Setup composer
const composer = new EffectComposer(renderer);

// Render scene
const renderPass = new RenderPass(scene, camera);
composer.addPass(renderPass);

// Add bloom
const bloomPass = new UnrealBloomPass(
  new THREE.Vector2(window.innerWidth, window.innerHeight),
  1.5, // strength
  0.4, // radius
  0.85, 
);
composer.(bloomPass);


 () {
  (animate);
  composer.(); 
}