Skill UI

Designs and implements immersive web experiences using Three.js, React Three Fiber, Spline, and WebGL, covering product configurators, portfolios, scroll-driven scenes, and performance-aware 3D delivery.

This guide provides comprehensive best practices for creating high-quality videos using Remotion within a React environment. It covers advanced techniques for dynamic content generation, including integrating 3D models (Three.js), managing diverse assets like audio, video, and fonts, implementing complex animations, data visualization, and generating precise captions. Use this skill when developing professional, robust video generation workflows in React.

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.

A comprehensive guide covering modern web game development principles. It details framework selection (Phaser, Three.js), implementing WebGPU, performance optimization strategies like asset compression and object pooling, adhering to browser constraints, and utilizing PWA capabilities for cross-platform gaming 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.