{"id":"7df91278-dea0-4d22-a467-3f40e30db42a","shortId":"LaQGAV","kind":"skill","title":"threejs-materials","tagline":"Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.","description":"# Three.js Materials\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\n// PBR material (recommended for realistic rendering)\nconst material = new THREE.MeshStandardMaterial({\n  color: 0x00ff00,\n  roughness: 0.5,\n  metalness: 0.5,\n});\n\nconst mesh = new THREE.Mesh(geometry, material);\n```\n\n## Material Types Overview\n\n| Material             | Use Case                              | Lighting           |\n| -------------------- | ------------------------------------- | ------------------ |\n| MeshBasicMaterial    | Unlit, flat colors, wireframes        | No                 |\n| MeshLambertMaterial  | Matte surfaces, performance           | Yes (diffuse only) |\n| MeshPhongMaterial    | Shiny surfaces, specular highlights   | Yes                |\n| MeshStandardMaterial | PBR, realistic materials              | Yes (PBR)          |\n| MeshPhysicalMaterial | Advanced PBR, clearcoat, transmission | Yes (PBR+)         |\n| MeshToonMaterial     | Cel-shaded, cartoon look              | Yes (toon)         |\n| MeshNormalMaterial   | Debug normals                         | No                 |\n| MeshDepthMaterial    | Depth visualization                   | No                 |\n| ShaderMaterial       | Custom GLSL shaders                   | Custom             |\n| RawShaderMaterial    | Full shader control                   | Custom             |\n\n## MeshBasicMaterial\n\nNo lighting calculations. Fast, always visible.\n\n```javascript\nconst material = new THREE.MeshBasicMaterial({\n  color: 0xff0000,\n  transparent: true,\n  opacity: 0.5,\n  side: THREE.DoubleSide, // FrontSide, BackSide, DoubleSide\n  wireframe: false,\n  map: texture, // Color/diffuse texture\n  alphaMap: alphaTexture, // Transparency texture\n  envMap: envTexture, // Reflection texture\n  reflectivity: 1, // Env map intensity\n  fog: true, // Affected by scene fog\n});\n```\n\n## MeshLambertMaterial\n\nDiffuse-only lighting. Fast, no specular highlights.\n\n```javascript\nconst material = new THREE.MeshLambertMaterial({\n  color: 0x00ff00,\n  emissive: 0x111111, // Self-illumination color\n  emissiveIntensity: 1,\n  map: texture,\n  emissiveMap: emissiveTexture,\n  envMap: envTexture,\n  reflectivity: 0.5,\n});\n```\n\n## MeshPhongMaterial\n\nSpecular highlights. Good for shiny, plastic-like surfaces.\n\n```javascript\nconst material = new THREE.MeshPhongMaterial({\n  color: 0x0000ff,\n  specular: 0xffffff, // Highlight color\n  shininess: 100, // Highlight sharpness (0-1000)\n  emissive: 0x000000,\n  flatShading: false, // Flat vs smooth shading\n  map: texture,\n  specularMap: specTexture, // Per-pixel shininess\n  normalMap: normalTexture,\n  normalScale: new THREE.Vector2(1, 1),\n  bumpMap: bumpTexture,\n  bumpScale: 1,\n  displacementMap: dispTexture,\n  displacementScale: 1,\n});\n```\n\n## MeshStandardMaterial (PBR)\n\nPhysically-based rendering. Recommended for realistic results.\n\n```javascript\nconst material = new THREE.MeshStandardMaterial({\n  color: 0xffffff,\n  roughness: 0.5, // 0 = mirror, 1 = diffuse\n  metalness: 0.0, // 0 = dielectric, 1 = metal\n\n  // Textures\n  map: colorTexture, // Albedo/base color\n  roughnessMap: roughTexture, // Per-pixel roughness\n  metalnessMap: metalTexture, // Per-pixel metalness\n  normalMap: normalTexture, // Surface detail\n  normalScale: new THREE.Vector2(1, 1),\n  aoMap: aoTexture, // Ambient occlusion (uses uv2!)\n  aoMapIntensity: 1,\n  displacementMap: dispTexture, // Vertex displacement\n  displacementScale: 0.1,\n  displacementBias: 0,\n\n  // Emissive\n  emissive: 0x000000,\n  emissiveIntensity: 1,\n  emissiveMap: emissiveTexture,\n\n  // Environment\n  envMap: envTexture,\n  envMapIntensity: 1,\n\n  // Other\n  flatShading: false,\n  wireframe: false,\n  fog: true,\n});\n\n// Note: aoMap requires second UV channel\ngeometry.setAttribute(\"uv2\", geometry.attributes.uv);\n```\n\n## MeshPhysicalMaterial (Advanced PBR)\n\nExtends MeshStandardMaterial with advanced features.\n\n```javascript\nconst material = new THREE.MeshPhysicalMaterial({\n  // All MeshStandardMaterial properties plus:\n\n  // Clearcoat (car paint, lacquer)\n  clearcoat: 1.0, // 0-1 clearcoat layer strength\n  clearcoatRoughness: 0.1,\n  clearcoatMap: ccTexture,\n  clearcoatRoughnessMap: ccrTexture,\n  clearcoatNormalMap: ccnTexture,\n  clearcoatNormalScale: new THREE.Vector2(1, 1),\n\n  // Transmission (glass, water)\n  transmission: 1.0, // 0 = opaque, 1 = fully transparent\n  transmissionMap: transTexture,\n  thickness: 0.5, // Volume thickness for refraction\n  thicknessMap: thickTexture,\n  attenuationDistance: 1, // Absorption distance\n  attenuationColor: new THREE.Color(0xffffff),\n\n  // Refraction\n  ior: 1.5, // Index of refraction (1-2.333)\n\n  // Sheen (fabric, velvet)\n  sheen: 1.0,\n  sheenRoughness: 0.5,\n  sheenColor: new THREE.Color(0xffffff),\n  sheenColorMap: sheenTexture,\n  sheenRoughnessMap: sheenRoughTexture,\n\n  // Iridescence (soap bubbles, oil slicks)\n  iridescence: 1.0,\n  iridescenceIOR: 1.3,\n  iridescenceThicknessRange: [100, 400],\n  iridescenceMap: iridTexture,\n  iridescenceThicknessMap: iridThickTexture,\n\n  // Anisotropy (brushed metal)\n  anisotropy: 1.0,\n  anisotropyRotation: 0,\n  anisotropyMap: anisoTexture,\n\n  // Specular\n  specularIntensity: 1,\n  specularColor: new THREE.Color(0xffffff),\n  specularIntensityMap: specIntTexture,\n  specularColorMap: specColorTexture,\n});\n```\n\n### Glass Material Example\n\n```javascript\nconst glass = new THREE.MeshPhysicalMaterial({\n  color: 0xffffff,\n  metalness: 0,\n  roughness: 0,\n  transmission: 1,\n  thickness: 0.5,\n  ior: 1.5,\n  envMapIntensity: 1,\n});\n```\n\n### Car Paint Example\n\n```javascript\nconst carPaint = new THREE.MeshPhysicalMaterial({\n  color: 0xff0000,\n  metalness: 0.9,\n  roughness: 0.5,\n  clearcoat: 1,\n  clearcoatRoughness: 0.1,\n});\n```\n\n## MeshToonMaterial\n\nCel-shaded cartoon look.\n\n```javascript\nconst material = new THREE.MeshToonMaterial({\n  color: 0x00ff00,\n  gradientMap: gradientTexture, // Optional: custom shading gradient\n});\n\n// Create step gradient texture\nconst colors = new Uint8Array([0, 128, 255]);\nconst gradientMap = new THREE.DataTexture(colors, 3, 1, THREE.RedFormat);\ngradientMap.minFilter = THREE.NearestFilter;\ngradientMap.magFilter = THREE.NearestFilter;\ngradientMap.needsUpdate = true;\n```\n\n## MeshNormalMaterial\n\nVisualize surface normals. Useful for debugging.\n\n```javascript\nconst material = new THREE.MeshNormalMaterial({\n  flatShading: false,\n  wireframe: false,\n});\n```\n\n## MeshDepthMaterial\n\nRender depth values. Used for shadow maps, DOF effects.\n\n```javascript\nconst material = new THREE.MeshDepthMaterial({\n  depthPacking: THREE.RGBADepthPacking,\n});\n```\n\n## PointsMaterial\n\nFor point clouds.\n\n```javascript\nconst material = new THREE.PointsMaterial({\n  color: 0xffffff,\n  size: 0.1,\n  sizeAttenuation: true, // Scale with distance\n  map: pointTexture,\n  alphaMap: alphaTexture,\n  transparent: true,\n  alphaTest: 0.5, // Discard pixels below threshold\n  vertexColors: true, // Use per-vertex colors\n});\n\nconst points = new THREE.Points(geometry, material);\n```\n\n## LineBasicMaterial & LineDashedMaterial\n\n```javascript\n// Solid lines\nconst lineMaterial = new THREE.LineBasicMaterial({\n  color: 0xffffff,\n  linewidth: 1, // Note: >1 only works on some systems\n  linecap: \"round\",\n  linejoin: \"round\",\n});\n\n// Dashed lines\nconst dashedMaterial = new THREE.LineDashedMaterial({\n  color: 0xffffff,\n  dashSize: 0.5,\n  gapSize: 0.25,\n  scale: 1,\n});\n\n// Required for dashed lines\nconst line = new THREE.Line(geometry, dashedMaterial);\nline.computeLineDistances();\n```\n\n## ShaderMaterial\n\nCustom GLSL shaders with Three.js uniforms.\n\n```javascript\nconst material = new THREE.ShaderMaterial({\n  uniforms: {\n    time: { value: 0 },\n    color: { value: new THREE.Color(0xff0000) },\n    texture1: { value: texture },\n  },\n  vertexShader: `\n    varying vec2 vUv;\n    uniform float time;\n\n    void main() {\n      vUv = uv;\n      vec3 pos = position;\n      pos.z += sin(pos.x * 10.0 + time) * 0.1;\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);\n    }\n  `,\n  fragmentShader: `\n    varying vec2 vUv;\n    uniform vec3 color;\n    uniform sampler2D texture1;\n\n    void main() {\n      // Use texture2D() for GLSL 1.0, texture() for GLSL 3.0 (glslVersion: THREE.GLSL3)\n      vec4 texColor = texture2D(texture1, vUv);\n      gl_FragColor = vec4(color * texColor.rgb, 1.0);\n    }\n  `,\n  transparent: true,\n  side: THREE.DoubleSide,\n});\n\n// Update uniform in animation loop\nmaterial.uniforms.time.value = clock.getElapsedTime();\n```\n\n### Built-in Uniforms (auto-provided)\n\n```glsl\n// Vertex shader\nuniform mat4 modelMatrix;         // Object to world\nuniform mat4 modelViewMatrix;     // Object to camera\nuniform mat4 projectionMatrix;    // Camera projection\nuniform mat4 viewMatrix;          // World to camera\nuniform mat3 normalMatrix;        // For transforming normals\nuniform vec3 cameraPosition;      // Camera world position\n\n// Attributes\nattribute vec3 position;\nattribute vec3 normal;\nattribute vec2 uv;\n```\n\n## RawShaderMaterial\n\nFull control - no built-in uniforms/attributes.\n\n```javascript\nconst material = new THREE.RawShaderMaterial({\n  uniforms: {\n    projectionMatrix: { value: camera.projectionMatrix },\n    modelViewMatrix: { value: new THREE.Matrix4() },\n  },\n  vertexShader: `\n    precision highp float;\n    attribute vec3 position;\n    uniform mat4 projectionMatrix;\n    uniform mat4 modelViewMatrix;\n\n    void main() {\n      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n    }\n  `,\n  fragmentShader: `\n    precision highp float;\n\n    void main() {\n      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);\n    }\n  `,\n});\n```\n\n## Common Material Properties\n\nAll materials share these base properties:\n\n```javascript\n// Visibility\nmaterial.visible = true;\nmaterial.transparent = false;\nmaterial.opacity = 1.0;\nmaterial.alphaTest = 0; // Discard pixels with alpha < value\n\n// Rendering\nmaterial.side = THREE.FrontSide; // FrontSide, BackSide, DoubleSide\nmaterial.depthTest = true;\nmaterial.depthWrite = true;\nmaterial.colorWrite = true;\n\n// Blending\nmaterial.blending = THREE.NormalBlending;\n// NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, CustomBlending\n\n// Stencil\nmaterial.stencilWrite = false;\nmaterial.stencilFunc = THREE.AlwaysStencilFunc;\nmaterial.stencilRef = 0;\nmaterial.stencilMask = 0xff;\n\n// Polygon offset (z-fighting fix)\nmaterial.polygonOffset = false;\nmaterial.polygonOffsetFactor = 0;\nmaterial.polygonOffsetUnits = 0;\n\n// Misc\nmaterial.dithering = false;\nmaterial.toneMapped = true;\n```\n\n## Multiple Materials\n\n```javascript\n// Assign different materials to geometry groups\nconst geometry = new THREE.BoxGeometry(1, 1, 1);\nconst materials = [\n  new THREE.MeshBasicMaterial({ color: 0xff0000 }), // right\n  new THREE.MeshBasicMaterial({ color: 0x00ff00 }), // left\n  new THREE.MeshBasicMaterial({ color: 0x0000ff }), // top\n  new THREE.MeshBasicMaterial({ color: 0xffff00 }), // bottom\n  new THREE.MeshBasicMaterial({ color: 0xff00ff }), // front\n  new THREE.MeshBasicMaterial({ color: 0x00ffff }), // back\n];\nconst mesh = new THREE.Mesh(geometry, materials);\n\n// Custom groups\ngeometry.clearGroups();\ngeometry.addGroup(0, 6, 0); // start, count, materialIndex\ngeometry.addGroup(6, 6, 1);\n```\n\n## Environment Maps\n\n```javascript\n// Load cube texture\nconst cubeLoader = new THREE.CubeTextureLoader();\nconst envMap = cubeLoader.load([\n  \"px.jpg\",\n  \"nx.jpg\", // positive/negative X\n  \"py.jpg\",\n  \"ny.jpg\", // positive/negative Y\n  \"pz.jpg\",\n  \"nz.jpg\", // positive/negative Z\n]);\n\n// Apply to material\nmaterial.envMap = envMap;\nmaterial.envMapIntensity = 1;\n\n// Or set as scene environment (affects all PBR materials)\nscene.environment = envMap;\n\n// HDR environment (recommended)\nimport { RGBELoader } from \"three/examples/jsm/loaders/RGBELoader.js\";\nconst rgbeLoader = new RGBELoader();\nrgbeLoader.load(\"environment.hdr\", (texture) => {\n  texture.mapping = THREE.EquirectangularReflectionMapping;\n  scene.environment = texture;\n  scene.background = texture;\n});\n```\n\n## Material Cloning and Modification\n\n```javascript\n// Clone material\nconst clone = material.clone();\nclone.color.set(0x00ff00);\n\n// Modify at runtime\nmaterial.color.set(0xff0000);\nmaterial.needsUpdate = true; // Only needed for some changes\n\n// When needsUpdate is required:\n// - Changing flat shading\n// - Changing texture\n// - Changing transparent\n// - Custom shader code changes\n```\n\n## Performance Tips\n\n1. **Reuse materials**: Same material = batched draw calls\n2. **Avoid transparent when possible**: Transparent materials require sorting\n3. **Use alphaTest instead of transparency**: When applicable, faster\n4. **Choose simpler materials**: Basic > Lambert > Phong > Standard > Physical\n5. **Limit active lights**: Each light adds shader complexity\n\n```javascript\n// Material pooling\nconst materialCache = new Map();\nfunction getMaterial(color) {\n  const key = color.toString(16);\n  if (!materialCache.has(key)) {\n    materialCache.set(key, new THREE.MeshStandardMaterial({ color }));\n  }\n  return materialCache.get(key);\n}\n\n// Dispose when done\nmaterial.dispose();\n```\n\n## NodeMaterial / TSL (Future Direction)\n\nThree.js is moving toward **NodeMaterial** and **TSL (Three.js Shading Language)** as the standard material system, especially for the WebGPU renderer:\n\n```javascript\nimport { MeshStandardNodeMaterial } from \"three/addons/nodes/Nodes.js\";\nimport { color, uv, texture } from \"three/addons/nodes/Nodes.js\";\n\nconst material = new MeshStandardNodeMaterial();\nmaterial.colorNode = texture(colorMap, uv());\n```\n\n**Key points:**\n- NodeMaterial works with both WebGL and WebGPU renderers\n- `onBeforeCompile` does **not** work with the WebGPU renderer -- use NodeMaterial instead\n- TSL replaces GLSL for cross-renderer shader compatibility\n- Standard GLSL `ShaderMaterial` continues to work with the WebGL renderer\n\n## Lambert/Phong IBL Support (r183)\n\nAs of r183, `MeshLambertMaterial` and `MeshPhongMaterial` support image-based lighting (IBL) via `scene.environment`. Previously, only PBR materials (Standard/Physical) responded to environment maps set on the scene.\n\n## See Also\n\n- `threejs-textures` - Texture loading and configuration\n- `threejs-shaders` - Custom shader development\n- `threejs-lighting` - Light interaction with materials\n\n\n## When to Use\nUse this skill when tackling tasks related to its primary domain or functionality as described above.\n\n## Limitations\n- Use this skill only when the task clearly matches the scope described above.\n- Do not treat the output as a substitute for environment-specific validation, testing, or expert review.\n- Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.","tags":["threejs","materials","antigravity","awesome","skills","sickn33","agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows"],"capabilities":["skill","source-sickn33","skill-threejs-materials","topic-agent-skills","topic-agentic-skills","topic-ai-agent-skills","topic-ai-agents","topic-ai-coding","topic-ai-workflows","topic-antigravity","topic-antigravity-skills","topic-claude-code","topic-claude-code-skills","topic-codex-cli","topic-codex-skills"],"categories":["antigravity-awesome-skills"],"synonyms":[],"warnings":[],"endpointUrl":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-materials","protocol":"skill","transport":"skills-sh","auth":{"type":"none","details":{"cli":"npx skills add sickn33/antigravity-awesome-skills","source_repo":"https://github.com/sickn33/antigravity-awesome-skills","install_from":"skills.sh"}},"qualityScore":"0.700","qualityRationale":"deterministic score 0.70 from registry signals: · indexed on github topic:agent-skills · 34460 github stars · SKILL.md body (14,625 chars)","verified":false,"liveness":"unknown","lastLivenessCheck":null,"agentReviews":{"count":0,"score_avg":null,"cost_usd_avg":null,"success_rate":null,"latency_p50_ms":null,"narrative_summary":null,"summary_updated_at":null},"enrichmentModel":"deterministic:skill-github:v1","enrichmentVersion":1,"enrichedAt":"2026-04-22T06:52:01.620Z","embedding":null,"createdAt":"2026-04-18T21:46:20.695Z","updatedAt":"2026-04-22T06:52:01.620Z","lastSeenAt":"2026-04-22T06:52:01.620Z","tsv":"'-1':385 '-1000':230 '-2.333':437 '0':229,281,287,332,384,407,475,500,502,556,713,923,955,967,969,1033,1035 '0.0':286,902,903 '0.1':330,390,528,618,741 '0.25':684 '0.5':50,52,141,203,280,415,444,506,524,631,682 '0.9':522 '0x000000':232,335 '0x0000ff':220,1006 '0x00ff00':48,187,541,1001,1117 '0x00ffff':1021 '0x111111':189 '0xff':957 '0xff0000':137,520,718,996,1122 '0xff00ff':1016 '0xffff00':1011 '0xffffff':222,278,429,448,484,498,616,659,680 '1':162,195,252,253,257,261,283,289,315,316,324,337,344,400,401,409,423,436,480,504,510,526,565,661,663,686,988,989,990,1042,1074,1147 '1.0':383,406,442,459,473,748,765,782,891,901,904,921 '1.3':461 '1.5':432,508 '10.0':739 '100':226,463 '128':557 '16':1204 '2':1155 '255':558 '3':564,1164 '3.0':769 '4':1173 '400':464 '5':1182 '6':1034,1040,1041 'absorpt':424 'activ':1184 'add':1188 'additiveblend':945 'advanc':92,362,367 'affect':168,1080 'albedo/base':294 'alpha':927 'alphamap':153,626 'alphatest':630,1166 'alphatextur':154,627 'also':1335 'alway':129 'ambient':319 'anim':790 'anisotextur':477 'anisotropi':469,472 'anisotropymap':476 'anisotropyrot':474 'aomap':317,353 'aomapintens':323 'aotextur':318 'appli':1068 'applic':1171 'ask':1408 'assign':978 'attenuationcolor':426 'attenuationdist':422 'attribut':839,840,843,846,874 'auto':799 'auto-provid':798 'avoid':1156 'back':1022 'backsid':145,933 'base':266,912,1316 'basic':7,1177 'batch':1152 'blend':941 'bottom':1012 'boundari':1416 'brush':470 'bubbl':455 'built':795,854 'built-in':794,853 'bumpmap':254 'bumpscal':256 'bumptextur':255 'calcul':127 'call':1154 'camera':815,819,826,836 'camera.projectionmatrix':865 'cameraposit':835 'car':379,511 'carpaint':516 'cartoon':102,533 'case':64 'ccntextur':396 'ccrtextur':394 'cctextur':392 'cel':100,531 'cel-shad':99,530 'chang':1129,1134,1137,1139,1144 'channel':357 'choos':1174 'clarif':1410 'clear':1383 'clearcoat':94,378,382,386,525 'clearcoatmap':391 'clearcoatnormalmap':395 'clearcoatnormalscal':397 'clearcoatrough':389,527 'clearcoatroughnessmap':393 'clock.getelapsedtime':793 'clone':1107,1111,1114 'clone.color.set':1116 'cloud':609 'code':1143 'color':47,69,136,186,193,219,224,277,295,497,519,540,553,563,615,642,658,679,714,755,780,995,1000,1005,1010,1015,1020,1200,1212,1250 'color.tostring':1203 'color/diffuse':151 'colormap':1261 'colortextur':293 'common':905 'compat':1292 'complex':1190 'configur':1342 'const':43,53,132,182,215,273,370,493,515,536,552,559,581,600,611,643,654,675,691,706,858,984,991,1023,1049,1053,1093,1113,1194,1201,1255 'continu':1296 'control':122,851 'count':1037 'creat':20,548 'criteria':1419 'cross':1289 'cross-render':1288 'cube':1047 'cubeload':1050 'cubeloader.load':1055 'custom':21,115,118,123,545,699,1029,1141,1346 'customblend':948 'dash':673,689 'dashedmateri':676,696 'dashsiz':681 'debug':107,579 'depth':111,591 'depthpack':604 'describ':1373,1387 'detail':311 'develop':1348 'dielectr':288 'differ':979 'diffus':77,174,284 'diffuse-on':173 'direct':1223 'discard':632,924 'displac':328 'displacementbia':331 'displacementmap':258,325 'displacementscal':260,329 'dispos':1216 'disptextur':259,326 'distanc':425,623 'dof':597 'domain':1369 'done':1218 'doublesid':146,934 'draw':1153 'effect':598 'emiss':188,231,333,334 'emissiveintens':194,336 'emissivemap':198,338 'emissivetextur':199,339 'env':163 'environ':340,1043,1079,1087,1328,1399 'environment-specif':1398 'environment.hdr':1098 'envmap':157,200,341,1054,1072,1085 'envmapintens':343,509 'envtextur':158,201,342 'especi':1239 'exampl':491,513 'expert':1404 'extend':364 'fabric':439 'fals':148,234,347,349,586,588,919,951,965,972 'fast':128,177 'faster':1172 'featur':368 'fight':962 'fix':963 'flat':68,235,1135 'flatshad':233,346,585 'float':727,873,895 'fog':166,171,350 'fragcolor':778,899 'fragmentshad':749,892 'front':1017 'frontsid':144,932 'full':120,850 'fulli':410 'function':1198,1371 'futur':1222 'gapsiz':683 'geometri':57,647,695,982,985,1027 'geometry.addgroup':1032,1039 'geometry.attributes.uv':360 'geometry.cleargroups':1031 'geometry.setattribute':358 'getmateri':1199 'gl':742,777,885,898 'glass':403,489,494 'glsl':116,700,764,768,801,1286,1294 'glslversion':770 'good':207 'gradient':547,550 'gradientmap':542,560 'gradientmap.magfilter':569 'gradientmap.minfilter':567 'gradientmap.needsupdate':571 'gradienttextur':543 'group':983,1030 'hdr':1086 'highlight':83,180,206,223,227 'highp':872,894 'ibl':1304,1318 'illumin':192 'imag':1315 'image-bas':1314 'import':32,1089,1245,1249 'index':433 'input':1413 'instead':1167,1283 'intens':165 'interact':1353 'ior':431,507 'iridesc':453,458 'iridescenceior':460 'iridescencemap':465 'iridescencethicknessmap':467 'iridescencethicknessrang':462 'iridtextur':466 'iridthicktextur':468 'javascript':31,131,181,214,272,369,492,514,535,580,599,610,651,705,857,914,977,1045,1110,1191,1244 'key':1202,1207,1209,1215,1263 'lacquer':381 'lambert':1178 'lambert/phong':1303 'languag':1233 'layer':387 'left':1002 'light':65,126,176,1185,1187,1317,1351,1352 'like':212 'limit':1183,1375 'line':653,674,690,692 'line.computelinedistances':697 'linebasicmateri':649 'linecap':669 'linedashedmateri':650 'linejoin':671 'linemateri':655 'linewidth':660 'load':1046,1340 'look':103,534 'loop':791 'main':730,760,884,897 'map':149,164,196,239,292,596,624,1044,1197,1329 'mat3':828 'mat4':805,811,817,822,878,881 'match':1384 'materi':3,5,10,11,25,28,38,44,58,59,62,88,133,183,216,274,371,490,537,582,601,612,648,707,859,906,909,976,980,992,1028,1070,1083,1106,1112,1149,1151,1161,1176,1192,1237,1256,1324,1355 'material.alphatest':922 'material.blending':942 'material.clone':1115 'material.color.set':1121 'material.colornode':1259 'material.colorwrite':939 'material.depthtest':935 'material.depthwrite':937 'material.dispose':1219 'material.dithering':971 'material.envmap':1071 'material.envmapintensity':1073 'material.needsupdate':1123 'material.opacity':920 'material.polygonoffset':964 'material.polygonoffsetfactor':966 'material.polygonoffsetunits':968 'material.side':930 'material.stencilfunc':952 'material.stencilmask':956 'material.stencilref':954 'material.stencilwrite':950 'material.tonemapped':973 'material.transparent':918 'material.uniforms.time.value':792 'material.visible':916 'materialcach':1195 'materialcache.get':1214 'materialcache.has':1206 'materialcache.set':1208 'materialindex':1038 'matt':73 'mesh':16,54,1024 'meshbasicmateri':66,124 'meshdepthmateri':110,589 'meshlambertmateri':72,172,1310 'meshnormalmateri':106,573 'meshphongmateri':79,204,1312 'meshphysicalmateri':91,361 'meshstandardmateri':85,262,365,375 'meshstandardnodemateri':1246,1258 'meshtoonmateri':98,529 'metal':51,285,290,307,471,499,521 'metalnessmap':302 'metaltextur':303 'mirror':282 'misc':970 'miss':1421 'modelmatrix':806 'modelviewmatrix':745,812,866,882,888 'modif':1109 'modifi':1118 'move':1226 'multipl':975 'multiplyblend':947 'need':1126 'needsupd':1131 'new':45,55,134,184,217,250,275,313,372,398,427,446,482,495,517,538,554,561,583,602,613,645,656,677,693,708,716,860,868,986,993,998,1003,1008,1013,1018,1025,1051,1095,1196,1210,1257 'nodemateri':1220,1228,1265,1282 'normal':108,576,832,845 'normalblend':944 'normalmap':247,308 'normalmatrix':829 'normalscal':249,312 'normaltextur':248,309 'note':352,662 'nx.jpg':1057 'ny.jpg':1061 'nz.jpg':1065 'object':807,813 'occlus':320 'offset':959 'oil':456 'onbeforecompil':1273 'opac':140 'opaqu':408 'optim':24 'option':544 'output':1393 'overview':61 'paint':380,512 'pbr':6,37,86,90,93,97,263,363,1082,1323 'per':244,299,305,640 'per-pixel':243,298,304 'per-vertex':639 'perform':26,75,1145 'permiss':1414 'phong':8,1179 'physic':265,1181 'physically-bas':264 'pixel':245,300,306,633,925 'plastic':211 'plastic-lik':210 'plus':377 'point':608,644,1264 'pointsmateri':606 'pointtextur':625 'polygon':958 'pool':1193 'pos':734,747 'pos.x':738 'pos.z':736 'posit':735,743,838,842,876,886,890 'positive/negative':1058,1062,1066 'possibl':1159 'precis':871,893 'previous':1321 'primari':1368 'project':820 'projectionmatrix':744,818,863,879,887 'properti':12,376,907,913 'provid':800 'px.jpg':1056 'py.jpg':1060 'pz.jpg':1064 'quick':29 'r183':1306,1309 'rawshadermateri':119,849 'realist':41,87,270 'recommend':39,268,1088 'reflect':159,161,202 'refract':419,430,435 'relat':1365 'render':42,267,590,929,1243,1272,1280,1290,1302 'replac':1285 'requir':354,687,1133,1162,1412 'respond':1326 'result':271 'return':1213 'reus':1148 'review':1405 'rgbeload':1090,1094,1096 'rgbeloader.load':1097 'right':997 'rough':49,279,301,501,523 'roughnessmap':296 'roughtextur':297 'round':670,672 'runtim':1120 'safeti':1415 'sampler2d':757 'scale':621,685 'scene':170,1078,1333 'scene.background':1104 'scene.environment':1084,1102,1320 'scope':1386 'second':355 'see':1334 'self':191 'self-illumin':190 'set':1076,1330 'shade':101,238,532,546,1136,1232 'shader':9,22,117,121,701,803,1142,1189,1291,1345,1347 'shadermateri':114,698,1295 'shadow':595 'share':910 'sharp':228 'sheen':438,441 'sheencolor':445 'sheencolormap':449 'sheenrough':443 'sheenroughnessmap':451 'sheenroughtextur':452 'sheentextur':450 'shini':80,209,225,246 'side':142,785 'simpler':1175 'sin':737 'size':617 'sizeattenu':619 'skill':1361,1378 'skill-threejs-materials' 'slick':457 'smooth':237 'soap':454 'solid':652 'sort':1163 'source-sickn33' 'speccolortextur':488 'specif':1400 'specinttextur':486 'spectextur':242 'specular':82,179,205,221,478 'specularcolor':481 'specularcolormap':487 'specularintens':479 'specularintensitymap':485 'specularmap':241 'standard':1180,1236,1293 'standard/physical':1325 'start':30,1036 'stencil':949 'step':549 'stop':1406 'strength':388 'style':15 'substitut':1396 'subtractiveblend':946 'success':1418 'support':1305,1313 'surfac':74,81,213,310,575 'system':668,1238 'tackl':1363 'task':1364,1382 'test':1402 'texcolor':773 'texcolor.rgb':781 'textur':19,150,152,156,160,197,240,291,551,721,766,1048,1099,1103,1105,1138,1252,1260,1338,1339 'texture.mapping':1100 'texture1':719,758,775 'texture2d':762,774 'thick':414,417,505 'thicknessmap':420 'thicktextur':421 'three':34,36 'three.alwaysstencilfunc':953 'three.boxgeometry':987 'three.color':428,447,483,717 'three.cubetextureloader':1052 'three.datatexture':562 'three.doubleside':143,786 'three.equirectangularreflectionmapping':1101 'three.frontside':931 'three.glsl3':771 'three.js':4,27,703,1224,1231 'three.line':694 'three.linebasicmaterial':657 'three.linedashedmaterial':678 'three.matrix4':869 'three.mesh':56,1026 'three.meshbasicmaterial':135,994,999,1004,1009,1014,1019 'three.meshdepthmaterial':603 'three.meshlambertmaterial':185 'three.meshnormalmaterial':584 'three.meshphongmaterial':218 'three.meshphysicalmaterial':373,496,518 'three.meshstandardmaterial':46,276,1211 'three.meshtoonmaterial':539 'three.nearestfilter':568,570 'three.normalblending':943 'three.points':646 'three.pointsmaterial':614 'three.rawshadermaterial':861 'three.redformat':566 'three.rgbadepthpacking':605 'three.shadermaterial':709 'three.vector2':251,314,399 'three/addons/nodes/nodes.js':1248,1254 'three/examples/jsm/loaders/rgbeloader.js':1092 'threej':2,1337,1344,1350 'threejs-light':1349 'threejs-materi':1 'threejs-shad':1343 'threejs-textur':1336 'threshold':635 'time':711,728,740 'tip':1146 'toon':105 'top':1007 'topic-agent-skills' 'topic-agentic-skills' 'topic-ai-agent-skills' 'topic-ai-agents' 'topic-ai-coding' 'topic-ai-workflows' 'topic-antigravity' 'topic-antigravity-skills' 'topic-claude-code' 'topic-claude-code-skills' 'topic-codex-cli' 'topic-codex-skills' 'toward':1227 'transform':831 'transmiss':95,402,405,503 'transmissionmap':412 'transpar':138,155,411,628,783,1140,1157,1160,1169 'transtextur':413 'treat':1391 'true':139,167,351,572,620,629,637,784,917,936,938,940,974,1124 'tsl':1221,1230,1284 'type':60 'uint8array':555 'uniform':704,710,726,753,756,788,797,804,810,816,821,827,833,862,877,880 'uniforms/attributes':856 'unlit':67 'updat':787 'use':13,63,321,577,593,638,761,1165,1281,1358,1359,1376 'uv':356,732,848,1251,1262 'uv2':322,359 'valid':1401 'valu':592,712,715,720,864,867,928 'vari':723,750 'vec2':724,751,847 'vec3':733,754,834,841,844,875 'vec4':746,772,779,889,900 'velvet':440 'vertex':327,641,802 'vertexcolor':636 'vertexshad':722,870 'via':1319 'viewmatrix':823 'visibl':130,915 'visual':112,574 'void':729,759,883,896 'volum':416 'vs':236 'vuv':725,731,752,776 'water':404 'webgl':1269,1301 'webgpu':1242,1271,1279 'wirefram':70,147,348,587 'work':17,665,1266,1276,1298 'world':809,824,837 'x':1059 'y':1063 'yes':76,84,89,96,104 'z':961,1067 'z-fight':960","prices":[{"id":"f33915ee-412f-404c-ba93-32e5b750db7e","listingId":"7df91278-dea0-4d22-a467-3f40e30db42a","amountUsd":"0","unit":"free","nativeCurrency":null,"nativeAmount":null,"chain":null,"payTo":null,"paymentMethod":"skill-free","isPrimary":true,"details":{"org":"sickn33","category":"antigravity-awesome-skills","install_from":"skills.sh"},"createdAt":"2026-04-18T21:46:20.695Z"}],"sources":[{"listingId":"7df91278-dea0-4d22-a467-3f40e30db42a","source":"github","sourceId":"sickn33/antigravity-awesome-skills/threejs-materials","sourceUrl":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-materials","isPrimary":false,"firstSeenAt":"2026-04-18T21:46:20.695Z","lastSeenAt":"2026-04-22T06:52:01.620Z"}],"details":{"listingId":"7df91278-dea0-4d22-a467-3f40e30db42a","quickStartSnippet":null,"exampleRequest":null,"exampleResponse":null,"schema":null,"openapiUrl":null,"agentsTxtUrl":null,"citations":[],"useCases":[],"bestFor":[],"notFor":[],"kindDetails":{"org":"sickn33","slug":"threejs-materials","github":{"repo":"sickn33/antigravity-awesome-skills","stars":34460,"topics":["agent-skills","agentic-skills","ai-agent-skills","ai-agents","ai-coding","ai-workflows","antigravity","antigravity-skills","claude-code","claude-code-skills","codex-cli","codex-skills","cursor","cursor-skills","developer-tools","gemini-cli","gemini-skills","kiro","mcp","skill-library"],"license":"mit","html_url":"https://github.com/sickn33/antigravity-awesome-skills","pushed_at":"2026-04-22T06:40:00Z","description":"Installable GitHub library of 1,400+ agentic skills for Claude Code, Cursor, Codex CLI, Gemini CLI, Antigravity, and more. Includes installer CLI, bundles, workflows, and official/community skill collections.","skill_md_sha":"0b1e9f349378ccbb8d3a82cc8b8024122db45bb3","skill_md_path":"skills/threejs-materials/SKILL.md","default_branch":"main","skill_tree_url":"https://github.com/sickn33/antigravity-awesome-skills/tree/main/skills/threejs-materials"},"layout":"multi","source":"github","category":"antigravity-awesome-skills","frontmatter":{"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."},"skills_sh_url":"https://skills.sh/sickn33/antigravity-awesome-skills/threejs-materials"},"updatedAt":"2026-04-22T06:52:01.620Z"}}