[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6GD8BT0QS5P664V69PZPPP9":3,"skill-same:01M6GD8BT0QS5P664V69PZPPP9":62},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":18,"publishedAt":34,"linkOnly":35,"markdownContent":36,"markdownBody":37,"frontMatter":38,"refName":40,"commitSha":41,"skillDirectory":42,"forksCount":43,"repositoryHtmlUrl":44,"repositoryHomepageUrl":44,"ownerHtmlUrl":45,"ownerBlogUrl":6,"ownerDescription":46,"updatedAt":47,"install":48,"resources":61},"01M6GD8BT0QS5P664V69PZPPP9","threejs-materials",null,"Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.","Sam-06060\u002Fjarvis-assistant","Sam-06060","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F208600848?v=4","01M6CRKT7C7FXD21V6HXF293S0","Samson Frank Ganta","01M6CRKTBEKYFD8YX5Z1GT99EE",6,"Apache-2.0","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fthreejs-materials\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33],"threejs","threejs materials","pbr","performance","shaders","js","use","styling","properties","community","shader","three","basic","material","with","2026-11-10 10:12:30",false,"---\nname: threejs-materials\ndescription: Three.js materials - PBR, basic, phong, shader materials, material properties. Use when styling meshes, working with textures, creating custom shaders, or optimizing material performance.\nrisk: unknown\nsource: community\n---\n\n# Three.js Materials\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\n\u002F\u002F 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, \u002F\u002F FrontSide, BackSide, DoubleSide\n  wireframe: false,\n  map: texture, \u002F\u002F Color\u002Fdiffuse texture\n  alphaMap: alphaTexture, \u002F\u002F Transparency texture\n  envMap: envTexture, \u002F\u002F Reflection texture\n  reflectivity: 1, \u002F\u002F Env map intensity\n  fog: true, \u002F\u002F 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, \u002F\u002F 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, \u002F\u002F Highlight color\n  shininess: 100, \u002F\u002F Highlight sharpness (0-1000)\n  emissive: 0x000000,\n  flatShading: false, \u002F\u002F Flat vs smooth shading\n  map: texture,\n  specularMap: specTexture, \u002F\u002F 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, \u002F\u002F 0 = mirror, 1 = diffuse\n  metalness: 0.0, \u002F\u002F 0 = dielectric, 1 = metal\n\n  \u002F\u002F Textures\n  map: colorTexture, \u002F\u002F Albedo\u002Fbase color\n  roughnessMap: roughTexture, \u002F\u002F Per-pixel roughness\n  metalnessMap: metalTexture, \u002F\u002F Per-pixel metalness\n  normalMap: normalTexture, \u002F\u002F Surface detail\n  normalScale: new THREE.Vector2(1, 1),\n  aoMap: aoTexture, \u002F\u002F Ambient occlusion (uses uv2!)\n  aoMapIntensity: 1,\n  displacementMap: dispTexture, \u002F\u002F Vertex displacement\n  displacementScale: 0.1,\n  displacementBias: 0,\n\n  \u002F\u002F Emissive\n  emissive: 0x000000,\n  emissiveIntensity: 1,\n  emissiveMap: emissiveTexture,\n\n  \u002F\u002F Environment\n  envMap: envTexture,\n  envMapIntensity: 1,\n\n  \u002F\u002F Other\n  flatShading: false,\n  wireframe: false,\n  fog: true,\n});\n\n\u002F\u002F 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  \u002F\u002F All MeshStandardMaterial properties plus:\n\n  \u002F\u002F Clearcoat (car paint, lacquer)\n  clearcoat: 1.0, \u002F\u002F 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  \u002F\u002F Transmission (glass, water)\n  transmission: 1.0, \u002F\u002F 0 = opaque, 1 = fully transparent\n  transmissionMap: transTexture,\n  thickness: 0.5, \u002F\u002F Volume thickness for refraction\n  thicknessMap: thickTexture,\n  attenuationDistance: 1, \u002F\u002F Absorption distance\n  attenuationColor: new THREE.Color(0xffffff),\n\n  \u002F\u002F Refraction\n  ior: 1.5, \u002F\u002F Index of refraction (1-2.333)\n\n  \u002F\u002F 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  \u002F\u002F 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  \u002F\u002F Anisotropy (brushed metal)\n  anisotropy: 1.0,\n  anisotropyRotation: 0,\n  anisotropyMap: anisoTexture,\n\n  \u002F\u002F 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, \u002F\u002F Optional: custom shading gradient\n});\n\n\u002F\u002F 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, \u002F\u002F Scale with distance\n  map: pointTexture,\n  alphaMap: alphaTexture,\n  transparent: true,\n  alphaTest: 0.5, \u002F\u002F Discard pixels below threshold\n  vertexColors: true, \u002F\u002F Use per-vertex colors\n});\n\nconst points = new THREE.Points(geometry, material);\n```\n\n## LineBasicMaterial & LineDashedMaterial\n\n```javascript\n\u002F\u002F Solid lines\nconst lineMaterial = new THREE.LineBasicMaterial({\n  color: 0xffffff,\n  linewidth: 1, \u002F\u002F Note: >1 only works on some systems\n  linecap: \"round\",\n  linejoin: \"round\",\n});\n\n\u002F\u002F Dashed lines\nconst dashedMaterial = new THREE.LineDashedMaterial({\n  color: 0xffffff,\n  dashSize: 0.5,\n  gapSize: 0.25,\n  scale: 1,\n});\n\n\u002F\u002F 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      \u002F\u002F 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\u002F\u002F Update uniform in animation loop\nmaterial.uniforms.time.value = clock.getElapsedTime();\n```\n\n### Built-in Uniforms (auto-provided)\n\n```glsl\n\u002F\u002F Vertex shader\nuniform mat4 modelMatrix;         \u002F\u002F Object to world\nuniform mat4 modelViewMatrix;     \u002F\u002F Object to camera\nuniform mat4 projectionMatrix;    \u002F\u002F Camera projection\nuniform mat4 viewMatrix;          \u002F\u002F World to camera\nuniform mat3 normalMatrix;        \u002F\u002F For transforming normals\nuniform vec3 cameraPosition;      \u002F\u002F Camera world position\n\n\u002F\u002F Attributes\nattribute vec3 position;\nattribute vec3 normal;\nattribute vec2 uv;\n```\n\n## RawShaderMaterial\n\nFull control - no built-in uniforms\u002Fattributes.\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\u002F\u002F Visibility\nmaterial.visible = true;\nmaterial.transparent = false;\nmaterial.opacity = 1.0;\nmaterial.alphaTest = 0; \u002F\u002F Discard pixels with alpha \u003C value\n\n\u002F\u002F Rendering\nmaterial.side = THREE.FrontSide; \u002F\u002F FrontSide, BackSide, DoubleSide\nmaterial.depthTest = true;\nmaterial.depthWrite = true;\nmaterial.colorWrite = true;\n\n\u002F\u002F Blending\nmaterial.blending = THREE.NormalBlending;\n\u002F\u002F NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, CustomBlending\n\n\u002F\u002F Stencil\nmaterial.stencilWrite = false;\nmaterial.stencilFunc = THREE.AlwaysStencilFunc;\nmaterial.stencilRef = 0;\nmaterial.stencilMask = 0xff;\n\n\u002F\u002F Polygon offset (z-fighting fix)\nmaterial.polygonOffset = false;\nmaterial.polygonOffsetFactor = 0;\nmaterial.polygonOffsetUnits = 0;\n\n\u002F\u002F Misc\nmaterial.dithering = false;\nmaterial.toneMapped = true;\n```\n\n## Multiple Materials\n\n```javascript\n\u002F\u002F Assign different materials to geometry groups\nconst geometry = new THREE.BoxGeometry(1, 1, 1);\nconst materials = [\n  new THREE.MeshBasicMaterial({ color: 0xff0000 }), \u002F\u002F right\n  new THREE.MeshBasicMaterial({ color: 0x00ff00 }), \u002F\u002F left\n  new THREE.MeshBasicMaterial({ color: 0x0000ff }), \u002F\u002F top\n  new THREE.MeshBasicMaterial({ color: 0xffff00 }), \u002F\u002F bottom\n  new THREE.MeshBasicMaterial({ color: 0xff00ff }), \u002F\u002F front\n  new THREE.MeshBasicMaterial({ color: 0x00ffff }), \u002F\u002F back\n];\nconst mesh = new THREE.Mesh(geometry, materials);\n\n\u002F\u002F Custom groups\ngeometry.clearGroups();\ngeometry.addGroup(0, 6, 0); \u002F\u002F start, count, materialIndex\ngeometry.addGroup(6, 6, 1);\n```\n\n## Environment Maps\n\n```javascript\n\u002F\u002F Load cube texture\nconst cubeLoader = new THREE.CubeTextureLoader();\nconst envMap = cubeLoader.load([\n  \"px.jpg\",\n  \"nx.jpg\", \u002F\u002F positive\u002Fnegative X\n  \"py.jpg\",\n  \"ny.jpg\", \u002F\u002F positive\u002Fnegative Y\n  \"pz.jpg\",\n  \"nz.jpg\", \u002F\u002F positive\u002Fnegative Z\n]);\n\n\u002F\u002F Apply to material\nmaterial.envMap = envMap;\nmaterial.envMapIntensity = 1;\n\n\u002F\u002F Or set as scene environment (affects all PBR materials)\nscene.environment = envMap;\n\n\u002F\u002F HDR environment (recommended)\nimport { RGBELoader } from \"three\u002Fexamples\u002Fjsm\u002Floaders\u002FRGBELoader.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\u002F\u002F Clone material\nconst clone = material.clone();\nclone.color.set(0x00ff00);\n\n\u002F\u002F Modify at runtime\nmaterial.color.set(0xff0000);\nmaterial.needsUpdate = true; \u002F\u002F Only needed for some changes\n\n\u002F\u002F When needsUpdate is required:\n\u002F\u002F - Changing flat shading\n\u002F\u002F - Changing texture\n\u002F\u002F - Changing transparent\n\u002F\u002F - 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\u002F\u002F 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\u002F\u002F Dispose when done\nmaterial.dispose();\n```\n\n## NodeMaterial \u002F 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\u002Faddons\u002Fnodes\u002FNodes.js\";\nimport { color, uv, texture } from \"three\u002Faddons\u002Fnodes\u002FNodes.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\u002FPhong IBL Support (r183)\n\nAs of r183, `MeshLambertMaterial` and `MeshPhongMaterial` support image-based lighting (IBL) via `scene.environment`. Previously, only PBR materials (Standard\u002FPhysical) 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","# Three.js Materials\n\n## Quick Start\n\n```javascript\nimport * as THREE from \"three\";\n\n\u002F\u002F 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, \u002F\u002F FrontSide, BackSide, DoubleSide\n  wireframe: false,\n  map: texture, \u002F\u002F Color\u002Fdiffuse texture\n  alphaMap: alphaTexture, \u002F\u002F Transparency texture\n  envMap: envTexture, \u002F\u002F Reflection texture\n  reflectivity: 1, \u002F\u002F Env map intensity\n  fog: true, \u002F\u002F 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, \u002F\u002F 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, \u002F\u002F Highlight color\n  shininess: 100, \u002F\u002F Highlight sharpness (0-1000)\n  emissive: 0x000000,\n  flatShading: false, \u002F\u002F Flat vs smooth shading\n  map: texture,\n  specularMap: specTexture, \u002F\u002F 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, \u002F\u002F 0 = mirror, 1 = diffuse\n  metalness: 0.0, \u002F\u002F 0 = dielectric, 1 = metal\n\n  \u002F\u002F Textures\n  map: colorTexture, \u002F\u002F Albedo\u002Fbase color\n  roughnessMap: roughTexture, \u002F\u002F Per-pixel roughness\n  metalnessMap: metalTexture, \u002F\u002F Per-pixel metalness\n  normalMap: normalTexture, \u002F\u002F Surface detail\n  normalScale: new THREE.Vector2(1, 1),\n  aoMap: aoTexture, \u002F\u002F Ambient occlusion (uses uv2!)\n  aoMapIntensity: 1,\n  displacementMap: dispTexture, \u002F\u002F Vertex displacement\n  displacementScale: 0.1,\n  displacementBias: 0,\n\n  \u002F\u002F Emissive\n  emissive: 0x000000,\n  emissiveIntensity: 1,\n  emissiveMap: emissiveTexture,\n\n  \u002F\u002F Environment\n  envMap: envTexture,\n  envMapIntensity: 1,\n\n  \u002F\u002F Other\n  flatShading: false,\n  wireframe: false,\n  fog: true,\n});\n\n\u002F\u002F 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  \u002F\u002F All MeshStandardMaterial properties plus:\n\n  \u002F\u002F Clearcoat (car paint, lacquer)\n  clearcoat: 1.0, \u002F\u002F 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  \u002F\u002F Transmission (glass, water)\n  transmission: 1.0, \u002F\u002F 0 = opaque, 1 = fully transparent\n  transmissionMap: transTexture,\n  thickness: 0.5, \u002F\u002F Volume thickness for refraction\n  thicknessMap: thickTexture,\n  attenuationDistance: 1, \u002F\u002F Absorption distance\n  attenuationColor: new THREE.Color(0xffffff),\n\n  \u002F\u002F Refraction\n  ior: 1.5, \u002F\u002F Index of refraction (1-2.333)\n\n  \u002F\u002F 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  \u002F\u002F 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  \u002F\u002F Anisotropy (brushed metal)\n  anisotropy: 1.0,\n  anisotropyRotation: 0,\n  anisotropyMap: anisoTexture,\n\n  \u002F\u002F 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, \u002F\u002F Optional: custom shading gradient\n});\n\n\u002F\u002F 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, \u002F\u002F Scale with distance\n  map: pointTexture,\n  alphaMap: alphaTexture,\n  transparent: true,\n  alphaTest: 0.5, \u002F\u002F Discard pixels below threshold\n  vertexColors: true, \u002F\u002F Use per-vertex colors\n});\n\nconst points = new THREE.Points(geometry, material);\n```\n\n## LineBasicMaterial & LineDashedMaterial\n\n```javascript\n\u002F\u002F Solid lines\nconst lineMaterial = new THREE.LineBasicMaterial({\n  color: 0xffffff,\n  linewidth: 1, \u002F\u002F Note: >1 only works on some systems\n  linecap: \"round\",\n  linejoin: \"round\",\n});\n\n\u002F\u002F Dashed lines\nconst dashedMaterial = new THREE.LineDashedMaterial({\n  color: 0xffffff,\n  dashSize: 0.5,\n  gapSize: 0.25,\n  scale: 1,\n});\n\n\u002F\u002F 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      \u002F\u002F 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\u002F\u002F Update uniform in animation loop\nmaterial.uniforms.time.value = clock.getElapsedTime();\n```\n\n### Built-in Uniforms (auto-provided)\n\n```glsl\n\u002F\u002F Vertex shader\nuniform mat4 modelMatrix;         \u002F\u002F Object to world\nuniform mat4 modelViewMatrix;     \u002F\u002F Object to camera\nuniform mat4 projectionMatrix;    \u002F\u002F Camera projection\nuniform mat4 viewMatrix;          \u002F\u002F World to camera\nuniform mat3 normalMatrix;        \u002F\u002F For transforming normals\nuniform vec3 cameraPosition;      \u002F\u002F Camera world position\n\n\u002F\u002F Attributes\nattribute vec3 position;\nattribute vec3 normal;\nattribute vec2 uv;\n```\n\n## RawShaderMaterial\n\nFull control - no built-in uniforms\u002Fattributes.\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\u002F\u002F Visibility\nmaterial.visible = true;\nmaterial.transparent = false;\nmaterial.opacity = 1.0;\nmaterial.alphaTest = 0; \u002F\u002F Discard pixels with alpha \u003C value\n\n\u002F\u002F Rendering\nmaterial.side = THREE.FrontSide; \u002F\u002F FrontSide, BackSide, DoubleSide\nmaterial.depthTest = true;\nmaterial.depthWrite = true;\nmaterial.colorWrite = true;\n\n\u002F\u002F Blending\nmaterial.blending = THREE.NormalBlending;\n\u002F\u002F NormalBlending, AdditiveBlending, SubtractiveBlending, MultiplyBlending, CustomBlending\n\n\u002F\u002F Stencil\nmaterial.stencilWrite = false;\nmaterial.stencilFunc = THREE.AlwaysStencilFunc;\nmaterial.stencilRef = 0;\nmaterial.stencilMask = 0xff;\n\n\u002F\u002F Polygon offset (z-fighting fix)\nmaterial.polygonOffset = false;\nmaterial.polygonOffsetFactor = 0;\nmaterial.polygonOffsetUnits = 0;\n\n\u002F\u002F Misc\nmaterial.dithering = false;\nmaterial.toneMapped = true;\n```\n\n## Multiple Materials\n\n```javascript\n\u002F\u002F Assign different materials to geometry groups\nconst geometry = new THREE.BoxGeometry(1, 1, 1);\nconst materials = [\n  new THREE.MeshBasicMaterial({ color: 0xff0000 }), \u002F\u002F right\n  new THREE.MeshBasicMaterial({ color: 0x00ff00 }), \u002F\u002F left\n  new THREE.MeshBasicMaterial({ color: 0x0000ff }), \u002F\u002F top\n  new THREE.MeshBasicMaterial({ color: 0xffff00 }), \u002F\u002F bottom\n  new THREE.MeshBasicMaterial({ color: 0xff00ff }), \u002F\u002F front\n  new THREE.MeshBasicMaterial({ color: 0x00ffff }), \u002F\u002F back\n];\nconst mesh = new THREE.Mesh(geometry, materials);\n\n\u002F\u002F Custom groups\ngeometry.clearGroups();\ngeometry.addGroup(0, 6, 0); \u002F\u002F start, count, materialIndex\ngeometry.addGroup(6, 6, 1);\n```\n\n## Environment Maps\n\n```javascript\n\u002F\u002F Load cube texture\nconst cubeLoader = new THREE.CubeTextureLoader();\nconst envMap = cubeLoader.load([\n  \"px.jpg\",\n  \"nx.jpg\", \u002F\u002F positive\u002Fnegative X\n  \"py.jpg\",\n  \"ny.jpg\", \u002F\u002F positive\u002Fnegative Y\n  \"pz.jpg\",\n  \"nz.jpg\", \u002F\u002F positive\u002Fnegative Z\n]);\n\n\u002F\u002F Apply to material\nmaterial.envMap = envMap;\nmaterial.envMapIntensity = 1;\n\n\u002F\u002F Or set as scene environment (affects all PBR materials)\nscene.environment = envMap;\n\n\u002F\u002F HDR environment (recommended)\nimport { RGBELoader } from \"three\u002Fexamples\u002Fjsm\u002Floaders\u002FRGBELoader.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\u002F\u002F Clone material\nconst clone = material.clone();\nclone.color.set(0x00ff00);\n\n\u002F\u002F Modify at runtime\nmaterial.color.set(0xff0000);\nmaterial.needsUpdate = true; \u002F\u002F Only needed for some changes\n\n\u002F\u002F When needsUpdate is required:\n\u002F\u002F - Changing flat shading\n\u002F\u002F - Changing texture\n\u002F\u002F - Changing transparent\n\u002F\u002F - 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\u002F\u002F 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\u002F\u002F Dispose when done\nmaterial.dispose();\n```\n\n## NodeMaterial \u002F 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\u002Faddons\u002Fnodes\u002FNodes.js\";\nimport { color, uv, texture } from \"three\u002Faddons\u002Fnodes\u002FNodes.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\u002FPhong IBL Support (r183)\n\nAs of r183, `MeshLambertMaterial` and `MeshPhongMaterial` support image-based lighting (IBL) via `scene.environment`. Previously, only PBR materials (Standard\u002FPhysical) 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",{"name":5,"risk":39,"source":28,"description":7},"unknown","main","a50a3aa6b39fb0e1b7db88bef1bfc9c93606e126","modules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fthreejs-materials",0,"https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant","https:\u002F\u002Fgithub.com\u002FSam-06060","Mobile Application Developer | Kotlin | Flutter, KMP, Swfit, Android,Swift UI | Building at Saar It Resources | Creator of Jarvis (AI Assistant)","2026-06-23 05:13:38",{"source":8,"skillName":5,"commands":49,"prompt":59,"zipAvailable":60},[50,53,56],{"tool":51,"command":52},"npx","npx skills add Sam-06060\u002Fjarvis-assistant --skill threejs-materials",{"tool":54,"command":55},"bunx","bunx skills add Sam-06060\u002Fjarvis-assistant --skill threejs-materials",{"tool":57,"command":58},"pnpm","pnpm dlx skills add Sam-06060\u002Fjarvis-assistant --skill threejs-materials","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fthreejs-materials\u002FSKILL.md",true,[],[63,76,91,118,137,164],{"skillNo":64,"name":65,"nameZh":6,"description":6,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":66,"categories":67,"keywords":73,"publishedAt":34},"01M6GDRVS6FXX3ESH0C9DW01C0","test_skill","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fscratch\u002Ftest_skill\u002FSKILL.md",[68],{"categoryNo":69,"categoryName":70,"taxonomyType":71,"taxonomyTypeDesc":72},"01JBSEEDCAT000000000000008","测试与质量","SCENARIO","使用场景",[74,75],"Test Skill","test",{"skillNo":77,"name":78,"nameZh":6,"description":79,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":80,"categories":81,"keywords":82,"publishedAt":34},"01M6GDRQ40HX22MA6XWC31RHHK","zustand-store-ts","Create Zustand stores following established patterns with proper TypeScript types and middleware.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzustand-store-ts\u002FSKILL.md",[],[83,84,85,33,86,87,88,28,89,90],"zustand store ts","zustand","store","types","middleware","patterns","create","typescript",{"skillNo":92,"name":93,"nameZh":6,"description":94,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":95,"categories":96,"keywords":100,"publishedAt":34},"01M6GDRKEA0WE670SPFWX5GKCN","zoom-automation","Automate Zoom meeting creation, management, recordings, webinars, and participant tracking via Rube MCP (Composio). Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzoom-automation\u002FSKILL.md",[97],{"categoryNo":98,"categoryName":99,"taxonomyType":71,"taxonomyTypeDesc":72},"01JBSEEDCAT000000000000023","Skill与智能体开发",[101,102,103,104,105,106,107,108,109,110,111,112,113,114,28,115,116,117],"automation","zoom automation","zoom","first","Tools","search","MCP","via","meeting","automate","critical","creation","webinars","composio","recordings","management","tracking",{"skillNo":119,"name":120,"nameZh":6,"description":121,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":122,"categories":123,"keywords":125,"publishedAt":34},"01M6GDRFS1452PC71JQ38S24HR","zoho-crm-automation","Automate Zoho CRM tasks via Rube MCP (Composio): create\u002Fupdate records, search contacts, manage leads, and convert leads. Always search tools first for current schemas.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzoho-crm-automation\u002FSKILL.md",[124],{"categoryNo":98,"categoryName":99,"taxonomyType":71,"taxonomyTypeDesc":72},[126,101,127,128,129,130,131,28,106,132,114,133,111,110,105,134,89,135,107,136],"crm automation","zoho crm","crm","zoho crm automation","zoho","leads","contacts","records","update","tasks","manage",{"skillNo":138,"name":139,"nameZh":6,"description":140,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":141,"categories":142,"keywords":146,"publishedAt":34},"01M6GDRCKQBAVTGHX5XBH26KPZ","zod-validation-expert","Expert in Zod — TypeScript-first schema validation. Covers parsing, custom errors, refinements, type inference, and integration with React Hook Form, Next.js, and tRPC.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzod-validation-expert\u002FSKILL.md",[143],{"categoryNo":144,"categoryName":145,"taxonomyType":71,"taxonomyTypeDesc":72},"01JBSEEDCAT000000000000009","前端开发",[147,148,149,150,151,90,152,153,154,155,156,157,33,158,159,160,161,28,162,163],"expert","zod","zod validation expert","validation","react","safe","parsing","errors","schema validation","react hook form","hook","trpc","form","type","next","schema","Next.js",{"skillNo":165,"name":166,"nameZh":6,"description":167,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":168,"categories":169,"keywords":171,"publishedAt":34},"01M6GDR658B08K4MY0RWD4A6EH","zeroize-audit","Detects missing zeroization of sensitive data in source code and identifies zeroization removed by compiler optimizations, with assembly-level analysis, and control-flow verification. Use for auditing C\u002FC++\u002FRust code handling secrets, keys, passwords, or other sensitive data.","https:\u002F\u002Fgithub.com\u002FSam-06060\u002Fjarvis-assistant\u002Fblob\u002Fmain\u002Fmodules\u002Fagent_skills\u002Fawesome-skills\u002Fplaybooks\u002Fzeroize-audit\u002FSKILL.md",[170],{"categoryNo":98,"categoryName":99,"taxonomyType":71,"taxonomyTypeDesc":72},[172,173,174,175,176,177,178,179,28,180,181,182,183,184,185,186,187,188,189,107],"zeroize audit","audit","write","passwords","get","project","c++","activate","assembly","read","Bash","secrets","analysis","data","flow","verification","code","rust"]