threejs▌
18 indexed skills · max 10 per page
threejs-lighting
cloudai-x/threejs-skills · Productivity
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
threejs-textures
cloudai-x/threejs-skills · Productivity
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,
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-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