WebGL and Three.js skills - shaders, geometry, and animation.
The CloudAI-X/threejs-skills collection - Three.js core APIs, custom GLSL shaders, geometry, materials, lighting, controls, and post-processing.
Arranged in the author's recommended order. Walk through them in sequence, or open any one on its own.
Write custom Three.js shaders - ShaderMaterial vs RawShaderMaterial, uniforms and built-in attributes, GLSL vertex/fragment structure, extending built-in materials, debugging, and performance.
View skillAnimate in Three.js - keyframe clips, the AnimationMixer/AnimationAction system, GLTF and skeletal animation, morph targets, procedural motion with Clock, and blending between animations.
Create and optimize Three.js geometry - built-in primitives, custom BufferGeometry with position/normal/uv attributes, indexed meshes, and InstancedMesh for rendering many objects efficiently.
Add pointer, touch, and selection to Three.js scenes - raycasting for click detection, OrbitControls for camera, and interaction state for hover and drag in 3D experiences.
Build Three.js lighting rigs - ambient, hemisphere, directional, point, spot, and area lights, plus shadow maps and image-based environment lighting, with notes on cost and performance.
Load 3D assets in Three.js - GLTF/GLB models, textures, and HDR environments - with LoadingManager progress tracking, correct color space, and async load patterns.
View skillSelect and configure Three.js materials - Basic, Lambert, Phong, Standard/Physical PBR, Toon, and ShaderMaterial - plus texture maps and PBR settings for realistic or stylized meshes.
Build Three.js post-processing pipelines with EffectComposer - bloom, depth-of-field, color grading, and custom screen-space shader passes - with resize handling and performance tradeoffs.