[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M71CE7GRW6XH7XNGR2YPA6XP":3,"skill-same:01M71CE7GRW6XH7XNGR2YPA6XP":63},{"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":36,"linkOnly":37,"markdownContent":38,"markdownBody":39,"frontMatter":40,"refName":41,"commitSha":42,"skillDirectory":43,"forksCount":44,"repositoryHtmlUrl":45,"repositoryHomepageUrl":6,"ownerHtmlUrl":46,"ownerBlogUrl":6,"ownerDescription":47,"updatedAt":48,"install":49,"resources":62},"01M71CE7GRW6XH7XNGR2YPA6XP","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.","nexuslinkproductions\u002Fyuri-os","nexuslinkproductions","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F273246263?v=4","01M718YX9NZRCW50B59B8ZVDKN","Marcel Spatz","01M718YXAQ7530F4B1VKN6SFQV",2,"MIT","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fthreejs-materials\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35],"materials","threejs","threejs materials","shader","when","custom","with","material","basic","three","pbr","properties","styling","use","js","shaders","performance","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.\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## See Also\n\n- `threejs-textures` - Texture loading and configuration\n- `threejs-shaders` - Custom shader development\n- `threejs-lighting` - Light interaction with materials\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## See Also\n\n- `threejs-textures` - Texture loading and configuration\n- `threejs-shaders` - Custom shader development\n- `threejs-lighting` - Light interaction with materials\n",{"name":5,"description":7},"main","4c6d8d65f3d6096e2fc25b0845e481dda73c2794","skills\u002Fthreejs-materials",0,"https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions","Building deterministic AI governance and continuity systems. Workflow architect + visual storyteller","2026-11-11 16:42:59",{"source":8,"skillName":5,"commands":50,"prompt":60,"zipAvailable":61},[51,54,57],{"tool":52,"command":53},"npx","npx skills add nexuslinkproductions\u002Fyuri-os --skill threejs-materials",{"tool":55,"command":56},"bunx","bunx skills add nexuslinkproductions\u002Fyuri-os --skill threejs-materials",{"tool":58,"command":59},"pnpm","pnpm dlx skills add nexuslinkproductions\u002Fyuri-os --skill threejs-materials","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fthreejs-materials\u002FSKILL.md",true,[],[64,84,108,138,166,185],{"skillNo":65,"name":66,"nameZh":6,"description":67,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":68,"categories":69,"keywords":70,"publishedAt":36},"01M71CG1AME5WC0A79AE65WT0X","zoom-out","Tell the agent to zoom out and give broader context or a higher-level perspective. Use when you're unfamiliar with a section of code or need to understand how it fits into the bigger picture.","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fzoom-out\u002FSKILL.md",[],[71,72,25,73,74,75,76,77,78,32,79,23,80,81,82,83],"zoom out","zoom","harness","how","section","re","true","understand","perspective","you","code","it","context",{"skillNo":85,"name":86,"nameZh":6,"description":87,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":88,"categories":89,"keywords":90,"publishedAt":36},"01M71CFY9ATD0BAXV6B14HFG7C","yuri-shura","6-perspective adversarial review for high-stakes turns (architecture decisions, refactor planning, deployment review) — fans out architect, adversary (7-vector attack), maintainer, ops, product, and security perspectives in parallel, then consolidates. Use when user says 'review this decision', '\u002Fshura', 'adversarial review', 'what could go wrong', 'architecture review', or 'deployment review'.","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fyuri-shura\u002FSKILL.md",[],[91,92,73,93,94,95,96,97,98,99,100,32,101,23,102,103,104,105,106,107],"yuri shura","parallel","architecture review","planning","for","deployment","vector","strategic review","decision","strategic","ops","workflow","decisions","architecture","review","perspectives","adversarial",{"skillNo":109,"name":110,"nameZh":6,"description":111,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":112,"categories":113,"keywords":119,"publishedAt":36},"01M71CFTTYW1HA2MNX38EV1GJ5","yuri-sales-intelligence","Unified sales and outreach skill generating cold outreach openers, social selling sequences, objection rebuttals, and ad creative for any paid platform — multi-persona aware, adapting tone and offer frame to buyer type. Use when user says 'write a cold email', 'outreach sequence', 'objection handling', 'ad copy', or 'sales pitch'.","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fyuri-sales-intelligence\u002FSKILL.md",[114],{"categoryNo":115,"categoryName":116,"taxonomyType":117,"taxonomyTypeDesc":118},"01JBSEEDCAT000000000000005","邮件与沟通","SCENARIO","使用场景",[120,121,122,123,124,125,126,127,128,23,129,130,131,132,133,134,135,95,136,137],"intelligence","sales intelligence","yuri sales intelligence","sales","cold","paid","social","persona","pitch","cold email","ad creative","write","sequences","sequence","platform","email","cold outreach","frame",{"skillNo":139,"name":140,"nameZh":6,"description":141,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":142,"categories":143,"keywords":152,"publishedAt":36},"01M71CFQMBFTFADJNGP0Z2WCYK","yuri-code-intelligence","Unified code quality intelligence layer that diagnoses code smells (Long Method, Feature Envy, design pattern issues), prescribes targeted Fowler refactoring techniques, and reviews code for security, performance, and clarity. Use when user says 'review this code', 'refactor this', 'what's wrong with this method', 'code smells', or 'clean this up'.","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fyuri-code-intelligence\u002FSKILL.md",[144,147],{"categoryNo":145,"categoryName":146,"taxonomyType":117,"taxonomyTypeDesc":118},"01JBSEEDCAT000000000000007","代码审查",{"categoryNo":148,"categoryName":149,"taxonomyType":150,"taxonomyTypeDesc":151},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[153,81,154,120,73,155,156,157,95,35,158,159,160,161,162,163,164,165,32,23],"yuri code intelligence","code intelligence","reviews","code quality","feature","code review","long","up","issues","clean","techniques","improve","design",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":172,"publishedAt":36},"01M71CFP32RT6GD3GKNHCJP8VP","yuri-adw","Invoke when user asks to run the ADW loop \u002F agentic engineering loop \u002F software factory workflow.","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fyuri-adw\u002FSKILL.md",[],[173,174,175,176,177,178,179,180,181,23,182,102,183,184],"yuri adw","run","engineering loop","software factory","software","agentic engineering","factory","loop","invoke","engineering","agentic","user",{"skillNo":186,"name":187,"nameZh":6,"description":188,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":189,"categories":190,"keywords":203,"publishedAt":36},"01M71CFK4VPEKY6A73237P7RSN","writing-skills","Use when creating new skills, editing existing skills, or verifying skills work before deployment","https:\u002F\u002Fgithub.com\u002Fnexuslinkproductions\u002Fyuri-os\u002Fblob\u002Fmain\u002Fskills\u002Fwriting-skills\u002FSKILL.md",[191,194,197,200],{"categoryNo":192,"categoryName":193,"taxonomyType":117,"taxonomyTypeDesc":118},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":195,"categoryName":196,"taxonomyType":117,"taxonomyTypeDesc":118},"01JBSEEDCAT000000000000018","写作与文案",{"categoryNo":198,"categoryName":199,"taxonomyType":117,"taxonomyTypeDesc":118},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":201,"categoryName":202,"taxonomyType":150,"taxonomyTypeDesc":151},"01JBSEEDCAT000000000000036","内容创作者",[204,205,206,23,102,207,73,208,96,32,209],"writing","writing skills","new","work","editing","Existing"]