cloudai-x/threejs-skills▌

Custom GLSL shaders for Three.js with ShaderMaterial, uniforms, varyings, and built-in material extension. \n \n Covers ShaderMaterial vs. RawShaderMaterial, uniform types (floats, vectors, matrices, textures, arrays), and real-time uniform updates in animation loops \n Includes six common shader patterns: texture sampling, vertex displacement, Fresnel effects, noise-based effects, rim lighting, and dissolve effects \n Supports material extension via onBeforeCompile to inject custom code into bu

Nine material types covering unlit, PBR, custom shaders, and specialized rendering effects. \n \n Includes basic, Lambert, Phong, and standard PBR materials with varying lighting complexity; MeshPhysicalMaterial adds advanced features like clearcoat, transmission, and iridescence for glass, car paint, and fabric effects \n ShaderMaterial and RawShaderMaterial enable custom GLSL shaders with automatic or manual uniform/attribute management \n Specialized materials for toon shading, normal debuggi

Asset loading for 3D models, textures, HDR environments, and progress tracking in Three.js. \n \n Supports multiple formats: GLTF/GLB (primary), OBJ+MTL, FBX, STL, PLY, and HDR/EXR environment maps with optional DRACO geometry and KTX2 texture compression \n LoadingManager coordinates multiple loaders with progress callbacks, onLoad/onError handlers, and unified asset tracking across the scene \n Texture configuration covers wrapping modes, filtering, anisotropic sharpening, color space manageme

Complete Three.js lighting system covering all light types, shadows, and environment-based illumination. \n \n Supports six light types (ambient, hemisphere, directional, point, spot, rect area) with detailed shadow configuration for each, including map size, camera frustum, bias tuning, and softness controls \n Includes environment lighting via HDR and cube textures with PMREM generation, light probes for ambient capture, and contact shadows as a fast alternative \n Provides three production-re

Comprehensive texture loading, configuration, and application for Three.js scenes. \n \n Covers texture types including basic, data, canvas, video, and compressed formats, with loaders for each \n Supports environment mapping via cube textures, HDR (RGBE/EXR), and equirectangular conversion with PMREM \n Includes UV mapping, texture atlasing, wrapping modes, filtering, mipmaps, and render targets for dynamic effects \n Provides PBR material texture setup (color, normal, roughness, metalness, AO,

Screen-space visual effects pipeline with bloom, depth-of-field, anti-aliasing, and custom shader composition. \n \n EffectComposer chains multiple rendering passes (bloom, SSAO, DOF, film grain, vignette, color grading) in sequence, with each pass reading the previous output \n Supports 15+ built-in effects including UnrealBloom, BokehPass (depth-of-field), FXAA/SMAA anti-aliasing, OutlinePass, and GlitchPass \n Custom ShaderPass enables writing fragment shaders for effects like chromatic aberr

Mouse and touch input handling, raycasting, camera controls, and object selection for Three.js scenes. \n \n Supports five camera control types: OrbitControls (orbit around target), FlyControls (free flight), FirstPersonControls (WASD movement), PointerLockControls (locked pointer FPS), and MapControls (2D map-style panning) \n Raycasting enables click detection, hover effects, and object selection with detailed intersection data including distance, UV coordinates, and face information \n Includ

Built-in and custom 3D geometry creation with BufferGeometry, instancing, and path-based shapes. \n \n Includes 15+ built-in geometries: basic shapes (box, sphere, plane, cylinder, cone, torus), polyhedra (dodecahedron, icosahedron), and path-based forms (lathe, extrude, tube, text) \n Custom BufferGeometry with typed arrays for vertices, indices, normals, UVs, and per-vertex colors; supports interleaved buffers for memory efficiency \n InstancedMesh for rendering thousands of identical objects

Essential Three.js scene setup, cameras, renderers, and object hierarchies for 3D web graphics. \n \n Covers scene creation, three camera types (Perspective, Orthographic, Array), renderer configuration with tone mapping and shadow support, and the Object3D hierarchy system \n Includes right-handed coordinate system, transform operations (position, rotation, scale, quaternions), and local vs. world space conversions \n Provides math utilities for Vector3, Matrix4, Quaternion, Euler angles, and C

Keyframe, skeletal, and morph target animation system for Three.js objects and models. \n \n Supports four animation track types: number, vector, quaternion, and color keyframes with linear, smooth, and discrete interpolation modes \n AnimationMixer plays clips on objects with full playback control: play, stop, pause, speed adjustment, weight-based blending, and fade in/out transitions \n Skeletal animation via bone manipulation, bone attachments, and GLTF model loading with automatic clip disco