🎯

threejs-postprocessing

🎯Skill

from cloudai-x/threejs-skills

What it does

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

Overview

Threejs-postprocessing is a Claude Code skill that provides comprehensive guidance for adding post-processing visual effects to Three.js scenes. It covers the EffectComposer pipeline, common screen-space effects like bloom and depth of field, selective bloom techniques, and custom shader pass creation.

Key Features

EffectComposer Pipeline - Complete setup for Three.js post-processing chains including render passes, effect ordering, and resize handling
Bloom & Glow Effects - Detailed UnrealBloomPass configuration with strength, radius, and threshold parameters for both full-scene and selective bloom
Selective Bloom - Layer-based techniques to apply bloom only to specific objects while keeping others unaffected using material swapping
Screen-Space Effects - Guidance on depth of field, color grading, blur, and other visual effects using the Three.js post-processing ecosystem
Custom Shader Passes - Instructions for creating custom screen-space shaders using ShaderPass and GLSL

Who is this for?

This skill is designed for developers building 3D web applications with Three.js who need to add visual polish through post-processing effects. It is especially valuable for game developers, creative coders, and interactive experience builders who want effects like bloom, glow, or custom screen-space shaders in their Three.js projects.

📦

Same repository

cloudai-x/threejs-skills(10 items)

threejs-postprocessing

Installation

Vibe Index InstallInstalls to .claude/skills/ - auto-recognized by Claude Code

npx vibeindex add cloudai-x/threejs-skills --skill threejs-postprocessing

skills.sh Install⚠ Installs to .agents/skills/ - may not be auto-recognized by Claude Code

npx skills add cloudai-x/threejs-skills --skill threejs-postprocessing

Manual InstallCopy SKILL.md content and save to the path below

~/.claude/skills/threejs-postprocessing/SKILL.md

SKILL.md

1,442Installs

1,181

Last UpdatedJan 19, 2026

View on GitHub Back to Skills

More from this repository9

🎯

threejs-animation🎯Skill

Provides Three.js animation API references, patterns, and best practices for creating 3D animations and interactive experiences.

🎯

threejs-fundamentals🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-shaders🎯Skill

Provides Three.js shader development patterns including custom WebGL shaders, GLSL code examples, and advanced rendering effects

🎯

threejs-geometry🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-interaction🎯Skill

Three.js agent skills covering scene setup, cameras, renderer configuration, Object3D hierarchy, coordinate systems, and 3D rendering fundamentals.

🎯

threejs-materials🎯Skill

Provides Three.js material system patterns including PBR materials, textures, normal maps, environment mapping, and advanced rendering techniques

🎯

threejs-loaders🎯Skill

Provides Three.js asset loading patterns for 3D models, textures, and animations using GLTF, OBJ, FBX, and other format loaders

🎯

threejs-lighting🎯Skill

Provides Three.js lighting patterns including light types, shadows, intensity controls, and techniques for realistic 3D scene illumination

🎯

threejs-textures🎯Skill

Provides Three.js texture patterns including texture loading, UV mapping, mipmaps, filtering, and texture animation techniques