Skill UI

This skill generates code to create complex, interactive 3D scenes and visualizations on the web using the Three.js library and WebGL. It covers the entire development lifecycle, including setting up the core components (Scene, Camera, Renderer), defining geometry, applying materials, adding lighting, and implementing animation loops. Ideal for web developers needing to display product mockups, scientific data visualizations, or immersive user experiences.

Master the complete animation pipeline within Three.js. This resource covers everything from creating custom keyframe tracks (position, quaternion, color) to managing complex animations using AnimationMixer and AnimationAction. Learn about procedural motion, animation blending (crossfading), morph targets, and loading skeletal animations from GLTF files for realistic 3D experiences.

This guide provides a comprehensive overview of the core concepts of Three.js, the leading JavaScript library for WebGL 3D rendering. It covers setting up the entire 3D environment, including the Scene, Camera types (Perspective, Orthographic), and the WebGLRenderer. Users will learn to handle object hierarchies, apply transforms (position, rotation, scale), and manage complex rendering settings like lighting, shadows, and environment maps. Essential for any developer starting a WebGL project.

Master the creation and manipulation of 3D geometry within the Three.js framework. This guide covers built-in primitive shapes (Box, Sphere, Cylinder), advanced procedural geometries (Extrude, Tube, TorusKnot), and text visualization. Crucially, it details the use of BufferGeometry, allowing developers to store vertex, normal, UV, and color data in optimized typed arrays for high-performance rendering and custom mesh construction.

This skill covers implementing complex user interactions within Three.js scenes. It demonstrates techniques like raycasting for precise object selection and click detection, handling mouse and touch inputs, and integrating various camera controls (OrbitControls, FlyControls, FirstPersonControls). Use this when building highly interactive, immersive 3D web applications.

A comprehensive guide to implementing various lighting techniques in Three.js, covering Ambient, Directional, Point, Spot, and RectArea lights. Learn how to configure realistic shadow maps, optimize lighting performance, and achieve high visual fidelity for your 3D web scenes.

A comprehensive utility for handling asset loading within Three.js environments. It supports various formats, including GLTF/GLB models, textures, HDR environments, and complex image assets. Features include robust asynchronous loading patterns, progress tracking via LoadingManager, and detailed configuration for PBR materials and environment mapping.

This guide provides a comprehensive overview of various material types in Three.js, including MeshBasic, MeshLambert, MeshPhong, MeshStandard, and advanced MeshPhysical materials. It covers techniques for achieving realistic PBR rendering, simulating materials like glass, car paint, and fabric, and utilizing custom shaders for maximum visual control. Essential for any developer styling meshes and creating immersive 3D experiences.

This guide details advanced post-processing techniques for Three.js, allowing developers to enhance 3D scenes with cinematic visual effects. It covers implementing Bloom (glow), Depth of Field (DOF), Anti-Aliasing (FXAA/SMAA), and Ambient Occlusion (SSAO) using EffectComposer, significantly boosting the visual fidelity and realism of web-based 3D applications.

A comprehensive guide to implementing custom visual effects in Three.js using shaders. Learn how to work with GLSL, utilize ShaderMaterial, manage uniforms (scalars, vectors, matrices, textures), and manipulate vertex and fragment data. Covers advanced patterns like texture sampling, vertex displacement, and custom lighting effects.

A comprehensive guide covering texture management in Three.js. Learn how to load various texture types (regular, data, video, KTX2), configure critical properties like UV mapping, color space, wrapping modes, filtering, and mipmapping. Includes advanced workflows for generating and utilizing cubemaps and HDR environment maps.

Load and animate 3D models in Three.js using GLTFLoader. Supports skinned animations, compressed meshes (DRACO), and KTX2 textures. Use this when importing .gltf or .glb files into a web scene. Includes setting up AnimationMixer for playback and handling compressed asset decoders.