threejs-materials

The threejs-materials skill provides a comprehensive reference and implementation guide for developers working with Three.js graphics. This module covers the full spectrum of material types available in the Three.js ecosystem, ranging from lightweight unlit materials to complex, physically-based rendering (PBR) systems required for professional-grade 3D visuals. It is designed to assist software agents in selecting the correct material class based on lighting requirements, performance constraints, and desired aesthetic outputs.

The skill enables agents to generate code for MeshStandardMaterial and MeshPhysicalMaterial, which are critical for photorealistic scenes, as well as specialized materials like MeshToonMaterial for stylized effects or ShaderMaterial for bespoke GLSL rendering logic. Users can leverage this documentation to properly configure material properties such as roughness, metalness, clearcoat, transmission, and environmental mapping, ensuring seamless integration with scene lighting and texture loaders.

• Extensive documentation on core material classes: MeshBasicMaterial, MeshLambertMaterial, MeshPhongMaterial, MeshStandardMaterial, and MeshPhysicalMaterial.

• Guidance on advanced features: Clearcoat, transmission, sheen, iridescence, and anisotropy for realistic surface simulations.

• Integration patterns for common map types: Diffuse, normal, roughness, metalness, ambient occlusion (aoMap), and displacement maps.

• Performance-oriented selection: Guidance on choosing between unlit, diffuse-only, and PBR materials to optimize GPU utilization.

• Custom rendering capabilities: Boilerplate and structural advice for implementing ShaderMaterial and RawShaderMaterial for custom vertex and fragment shader development.

• Input: Material type requests, visual requirements (e.g., 'shiny', 'transparent', 'metallic'), or performance optimization queries.

• Output: Valid Three.js JavaScript/TypeScript code snippets, including property configuration and map assignments.

• Best practices: Includes notes on UV channel requirements (e.g., aoMap UV2 usage), environment map intensities, and lighting interactions.

• Compatibility: Audited against Three.js r160+ standards to ensure deprecated APIs are avoided.