cloudai-x/threejs-skills

Overview

This skill documents Three.js materials and practical usage for styling meshes, textures, shaders, and optimizing material performance. It covers built-in material types (PBR, basic, phong, toon, depth, normal), shader materials, common properties, environment maps, and performance guidance. Use it to pick the right material and configure material properties for real-time rendering.

How this skill works

The skill explains what each material type does and which lighting model it uses (unlit, Lambert, Phong, PBR). It shows common properties and texture slots, how to set up environment maps and HDRI, and how to create custom shaders with ShaderMaterial and RawShaderMaterial. Performance tips and best practices explain when to reuse, dispose, or simplify materials for efficient draw calls.

When to use it

• Styling static or animated meshes with the appropriate lighting model
• Applying textures: albedo, normal, roughness, metalness, ao, displacement
• Building realistic surfaces using MeshStandardMaterial or MeshPhysicalMaterial
• Creating stylized looks with MeshToonMaterial or debugging with MeshNormalMaterial
• Implementing custom vertex/fragment effects using ShaderMaterial or RawShaderMaterial
• Optimizing scenes by reducing material complexity and reusing material instances

Best practices

• Prefer MeshStandardMaterial for realistic PBR results; use MeshPhysicalMaterial only when advanced features (clearcoat, transmission) are required
• Reuse materials to enable GPU batching and reduce draw calls; use a material cache or pooling
• Avoid unnecessary transparency; prefer alphaTest for masked transparency to skip expensive sorting
• Limit the number of dynamic lights and texture lookups in shaders to reduce fragment cost
• Call material.dispose() and texture.dispose() when geometry or materials are removed to free GPU memory

Example use cases

• Create a car shader with clearcoat, anisotropy and metallic flakes using MeshPhysicalMaterial
• Make a glass object with transmission, thickness, and IOR for believable refraction
• Use MeshToonMaterial with a custom gradientMap for cel-shaded characters
• Debug normal or topology issues with MeshNormalMaterial and visualize depth with MeshDepthMaterial
• Author a procedural water or ripple effect using ShaderMaterial uniforms and time-based animation