threejs▌
17 indexed skills · max 10 per page
threejs-postprocessing
cloudai-x/threejs-skills · Productivity
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
threejs-materials
cloudai-x/threejs-skills · Productivity
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
threejs-interaction
cloudai-x/threejs-skills · Productivity
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
threejs-geometry
cloudai-x/threejs-skills · Productivity
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
threejs-shaders
cloudai-x/threejs-skills · Productivity
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
threejs-fundamentals
cloudai-x/threejs-skills · Productivity
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
threejs-animation
cloudai-x/threejs-skills · Video
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