cloudai-x/threejs-skills
10 skills65.8k installs27.9k starsGitHub
Install
npx skills add https://github.com/cloudai-x/threejs-skillsSkills in this repo
1Threejs AnimationThree js animation keyframe animation skeletal animation morph targets animation mixing Use when animating objects playing GLTF animations creating procedural motion or blending animations name threejs-animation description Three js animation keyframe animation skeletal animation morph targets animation mixing Use when animating objects playing GLTF animations creating procedural motion or blending animations Three js Animation Quick Start javascript import as THREE from three Simple procedural animation const clock new THREE Clock function animate const delta clock getDelta const elapsed clock getElapsedTime mesh rotation y delta mesh position y Math sin elapsed 0 5 requestAnimationFrame animate renderer render scene camera animate Animation System Overview Three js animation system has three main components 1 AnimationClip Container for keyframe data 2 AnimationMixer Plays animations on a root object 3 AnimationAction Controls playback of a clip AnimationClip Stores keyframe animation data javascript Create animation clip const times 0 1 2 Keyframe times seconds const values 0 1 0 Values at each keyframe const track new THREE NumberKeyframeTrack position y Property path times va.10.4kinstalls2Threejs FundamentalsThree js scene setup cameras renderer Object3D hierarchy coordinate systems Use when setting up 3D scenes creating cameras configuring renderers managing object hierarchies or working with transforms name threejs-fundamentals description Three js scene setup cameras renderer Object3D hierarchy coordinate systems Use when setting up 3D scenes creating cameras configuring renderers managing object hierarchies or working with transforms Three js Fundamentals Quick Start javascript import as THREE from three Create scene camera renderer const scene new THREE Scene const camera new THREE PerspectiveCamera 75 window innerWidth window innerHeight 0 1 1000 const renderer new THREE WebGLRenderer antialias true renderer setSize window innerWidth window innerHeight renderer setPixelRatio Math min window devicePixelRatio 2 document body appendChild renderer domElement Add a mesh const geometry new THREE BoxGeometry 1 1 1 const material new THREE MeshStandardMaterial color 0x00ff00 const cube new THREE Mesh geometry material scene add cube Add light scene add new THREE AmbientLight 0xffffff 0 5 const dirLight new THREE DirectionalLight 0xffffff 1 dirLight position set 5 5 5 scene add dirLight.8kinstalls3Threejs ShadersThis skill covers writing and integrating GLSL shaders into Three.js scenes via ShaderMaterial and RawShaderMaterial, including full uniform type reference, varyings, and texture sampling. Developers use it when built-in materials are insufficient and custom GPU effects - dissolve, fresnel, rim lighting, vertex displacement, noise - are required. Key workflows include declaring and updating uniforms in the animation loop, passing interpolated data between vertex and fragment stages via varyings, and injecting code into existing PBR materials through onBeforeCompile with Three.js shader chunk injection points. The skill also covers instanced buffer attributes for per-instance data, GLSL 3.0 migration via glslVersion, ShaderChunk imports, and branching-free performance patterns using mix and step instead of conditionals. Debugging techniques using visual output and renderer.debug.checkShaderErrors are included.7kinstalls4Threejs GeometryThree js geometry creation built-in shapes BufferGeometry custom geometry instancing Use when creating 3D shapes working with vertices building custom meshes or optimizing with instanced rendering name threejs-geometry description Three js geometry creation built-in shapes BufferGeometry custom geometry instancing Use when creating 3D shapes working with vertices building custom meshes or optimizing with instanced rendering Three js Geometry Quick Start javascript import as THREE from three Built-in geometry const box new THREE BoxGeometry 1 1 1 const sphere new THREE SphereGeometry 0 5 32 32 const plane new THREE PlaneGeometry 10 10 Create mesh const material new THREE MeshStandardMaterial color 0x00ff00 const mesh new THREE Mesh box material scene add mesh Built-in Geometries Basic Shapes javascript Box width height depth widthSegments heightSegments depthSegments new THREE BoxGeometry 1 1 1 1 1 1 Sphere radius widthSegments heightSegments phiStart phiLength thetaStart thetaLength new THREE SphereGeometry 1 32 32 new THREE SphereGeometry 1 32 32 0 Math PI 2 0 Math PI Full sphere new THREE SphereGeometry 1 32 32 0 Math PI6.5kinstalls5Threejs InteractionThree js Interaction provides raycasting camera controls and event handling for interactive 3D experiences Developers use it when building click detection object selection camera manipulation orbit fly first-person pointer-lock and drag-and-drop workflows Key patterns include raycaster setup for mouse picking conversion between world and screen coordinates transforming and dragging objects with gizmos and throttled event handlers for performance Multiple control systems OrbitControls FlyControls PointerLockControls etc support different interaction paradigms Best practices cover layer filtering collision mesh optimization and event binding to minimize raycasts name threejs-interaction description Three js interaction raycasting controls mouse touch input object selection Use when handling user input implementing click detection adding camera controls or creating interactive 3D experiences Three js Interaction Quick Start javascript import as THREE from three import OrbitControls from three addons controls OrbitControls js Camera controls const controls new OrbitControls camera renderer domElement controls enableDamping true Raycasting for click detection const raycaster new THREE.6.3kinstalls6Threejs MaterialsThree js materials control how 3D geometry appears on screen through color texture lighting and custom shaders Developers use materials when styling meshes optimizing rendering performance or creating specific visual effects like glass car paint or cel-shading The skill covers 10 material types MeshBasicMaterial MeshStandardMaterial MeshPhysicalMaterial ShaderMaterial etc texture integration color maps normal maps roughness maps physically-based rendering PBR workflows environment mapping and custom GLSL shaders Key workflows include selecting appropriate material types by use case configuring roughness and metalness for realism applying multi-texture stacks handling transparency and blending and writing vertex fragment shaders for advanced effects name threejs-materials description Three js materials PBR basic phong shader materials material properties Use when styling meshes working with textures creating custom shaders or optimizing material performance Three js Materials Quick Start javascript import as THREE from three PBR material recommended for realistic rendering const material new THREE MeshStandardMaterial color 0x00ff00 roughness 0 5 metalness 0 5 const mesh new THREE.6.3kinstalls7Threejs PostprocessingThe threejs-postprocessing skill documents Three.js post-processing using EffectComposer and common passes for bloom, depth of field, FXAA, SMAA, SSAO, film grain, vignette, color correction, pixelation, glitch, halftone, and outline effects. Quick start assumes a base scene and renderer, then stacks passes with guidance on selective bloom for specific objects, custom ShaderPass examples like invert colors and chromatic aberration, and multi-pass render-to-texture workflows. WebGPU post-processing for Three.js r150+ is included alongside classic EffectComposer patterns. Performance tips recommend limiting pass count because each adds a full-screen render, lowering resolution on blur passes, disabling unused effects, preferring FXAA over MSAA, and toggling passes only when needed. Related skills point to threejs-shaders for custom shader development, threejs-textures for render targets, and threejs-fundamentals for renderer setup. Use when adding visual effects, color grading, blur, glow, or custom screen-space shaders to Three.js scenes.5.4kinstalls8Threejs LightingThe threejs-lighting skill covers Three.js light types, shadows, and environment lighting for WebGL scenes. Quick start adds AmbientLight for uniform fill and DirectionalLight as a sun-like parallel source at position 5,5,5. Overview table compares AmbientLight, HemisphereLight sky-ground gradients, DirectionalLight, PointLight, SpotLight, and RectAreaLight with shadow support and relative GPU cost notes. DirectionalLight shadow setup documents mapSize 2048, orthographic shadow camera bounds, PCFSoftShadowMap radius, and bias plus normalBias fixes for shadow acne with CameraHelper visualization. PointLight and SpotLight sections cover distance, decay, angle, penumbra, and castShadow configuration. Environment lighting includes PMREMGenerator cubemap workflows, HDR environment maps, and LightProbe spherical harmonics for image-based lighting. Performance guidance recommends minimizing shadow-casting lights, using light layers, baking static lighting where possible, and choosing cheaper light types for background fill. Use when adding lights, configuring shadows, setting up IBL, or optimizing lighting performance in Three.js projects.5.4kinstalls9Threejs LoadersThe threejs-loaders skill three.js asset loading - GLTF, textures, images, models, async patterns. Use when loading 3D models, textures, HDR environments, or managing loading progress.. Three.js Loaders Quick Start LoadingManager Coordinate multiple loaders and track progress. Texture Loading TextureLoader Texture Configuration CubeTextureLoader For environment maps and skyboxes. HDR/EXR Loading PMREMGenerator Generate prefiltered environment maps for PBR. GLTF/GLB Loading The most common 3D format for web. GLTF with Draco Compression GLTF with KTX2 Textures Process GLTF Content Other Model Formats OBJ + MTL FBX STL PLY Async/Promise Loading Promisified Loader Load Multiple Assets Caching Built-in Cache Custom Asset Manager Loading from Different Sources Data URL / Base64 Blob URL ArrayBuffer Custom Path/URL Error Handling Performance Tips 1. Use compressed formats : DRACO for geometry, KTX2/Basis for textures 2. Load progressively : Show placeholders while loading 3. Use it when developers need threejs loaders tasks covered in the upstream ECC or community skill documentation with concrete commands, prerequisites, and workflow steps rather than guessing APIs or conventions.5.3kinstalls10Threejs Texturesthreejs-textures covers Three.js texture types, UV mapping, environment maps, and texture settings for PBR and basic materials. It explains loading images, HDR environments, cube maps, repeat and offset wrapping, anisotropy, color spaces, and disposal to avoid GPU leaks. Agents use it when configuring map, normal, roughness, metalness, ao, emissive, and envMap slots on MeshStandardMaterial or older Phong materials. The skill includes async loading patterns, renderer outputColorSpace, and resizing textures for mobile performance. See SKILL.md for setup, examples, and guardrails before production use. See SKILL.md for setup, examples, and guardrails before production use. See SKILL.md for setup, examples, and guardrails before production use. See SKILL.md for setup, examples, and guardrails before production use. See SKILL.md for setup, examples, and guardrails before production use. See SKILL.md for setup, examples, and guardrails before production use.5.3kinstalls