[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill-b4152f9a-b406-4db1-9ff0-f827081cd15d":3,"$f3J7c00-4qJZ3bpg5OFYMncVMGHEXHmqO2K_l5L7x4TU":43},{"id":4,"title":5,"description":6,"categoryId":7,"moduleId":8,"tags":9,"prompt":10,"icon":11,"source":12,"sourceUrl":13,"authorId":14,"authorName":15,"isPublic":16,"stars":17,"runs":18,"createdAt":19,"updatedAt":19,"module":20,"category":27,"packages":34},"b4152f9a-b406-4db1-9ff0-f827081cd15d","threejs-materials","Three.js 材质 - PBR、基本、 phong、着色器材质、材质属性。用于样式化网格、处理纹理、创建自定义着色器或优化材质性能。","cat_life_career","mod_other","sickn33,other","---\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\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.\n","","imported","https:\u002F\u002Fgithub.com\u002Fsickn33\u002Fantigravity-awesome-skills","user_system_seed","SkillOPIC",true,206,1318,"2026-05-16 13:44:14",{"id":8,"name":21,"slug":22,"icon":23,"description":24,"sort":25,"createdAt":26},"其他","other","mdi-page-next-outline","其他类型Skill",5,"2026-05-16 12:53:40",{"id":7,"name":28,"slug":29,"icon":30,"description":31,"moduleId":8,"sort":32,"skillCount":33,"createdAt":26},"职场发展","career","mdi-briefcase-outline","面试准备、简历优化、职业规划",4,575,[35],{"id":36,"skillId":4,"version":37,"fileName":38,"fileSize":39,"filePath":40,"fileHash":41,"manifest":42,"createdAt":19},"883bb4ef-e114-437a-bf13-411190d6de9b","1.0.0","threejs-materials.zip",4976,"uploads\u002Fskills\u002Fb4152f9a-b406-4db1-9ff0-f827081cd15d\u002Fthreejs-materials.zip","c2c8e1548bdc5125d0ca1de475207b25b393225e4c3db5cc7b12ff02884d17c9","[{\"path\":\"SKILL.md\",\"isDirectory\":false,\"size\":14892}]",{"code":44,"message":45,"data":46},200,"success",{"items":47,"stats":48,"page":51},[],{"averageRating":49,"totalRatings":49,"ratingCounts":50},0,[49,49,49,49,49],{"limit":52,"offset":49,"hasMore":53,"nextOffset":52,"ratedOnly":16},15,false]