在 Three.js 中为几何体选择、配置…

适用于 Three.js 项目里给网格设置 PBR/基础/Phong/Toon/Shader 等材质，并处理纹理、环境贴图、多材质、克隆与性能优化。

适用场景

解决思路

1. 在 Three.js 项目中导入 `* as THREE`，用 `new THREE.MeshStandardMaterial({ color: 0x00ff00, roughness: 0.5, metalness: 0.5 })` 创建推荐的真实感 PBR 材质，再通过 `new THREE.Mesh(geometry, material)` 绑定到网格。
2. 按用途和光照需求选材质：MeshBasicMaterial 用于无光照平面色/线框；MeshLambertMaterial 用于哑光且只受漫反射光照；MeshPhongMaterial 用于高光塑料感；MeshStandardMaterial 用于 PBR 真实材质；MeshPhysicalMaterial 用于 clearcoat/transmission 等高级 PBR；MeshToonMaterial 用于卡通描边；MeshNormalMaterial 用于调试法线；MeshDepthMaterial 用于深度可视化；ShaderMaterial 用于自定义 GLSL；RawShaderMaterial 用于完全控制着色器。
3. 使用 MeshBasicMaterial 时设置 color、transparent、opacity、side、wireframe、map、alphaMap、envMap、reflectivity、fog；它不计算光照，速度快且始终可见；side 可为 THREE.FrontSide、THREE.BackSide、THREE.DoubleSide。
4. 使用 MeshLambertMaterial 时设置 color、emissive、emissiveIntensity、map、emissiveMap、envMap、reflectivity；它只计算漫反射光照，无镜面高光，适合性能优先的哑光表面。
5. 使用 MeshPhongMaterial 时设置 color、specular、shininess、emissive、flatShading、map、specularMap、normalMap、normalScale、bumpMap、bumpScale、displacementMap、displacementScale；shininess 控制高光锐度，范围 0-1000。
6. 使用 MeshStandardMaterial 时设置 color、roughness、metalness、map、roughnessMap、metalnessMap、normalMap、normalScale、aoMap、aoMapIntensity、displacementMap、displacementScale、displacementBias、emissive、emissiveIntensity、emissiveMap、envMap、envMapIntensity、flatShading、wireframe、fog；roughness 0 为镜面、1 为漫反射，metalness 0 为电介质、1 为金属。
7. 当 MeshStandardMaterial 使用 aoMap 时，必须提供第二套 UV：执行 `geometry.setAttribute('uv2', geometry.attributes.uv);`，因为 aoMap 会读取 uv2。
8. 使用 MeshPhysicalMaterial 时在 MeshStandardMaterial 全部属性基础上，按需设置 clearcoat、clearcoatRoughness、clearcoatMap、clearcoatRoughnessMap、clearcoatNormalMap、clearcoatNormalScale、transmission、transmissionMap、thickness、thicknessMap、attenuationDistance、attenuationColor、ior、sheen、sheenRoughness、sheenColor、sheenColorMap、sheenRoughnessMap、iridescence、iridescenceIOR、iridescenceThicknessRange、iridescenceMap、iridescenceThicknessMap、anisotropy、anisotropyRotation、anisotropyMap、specularIntensity、specularColor、specularIntensityMap、specularColorMap。
9. 玻璃材质可用 MeshPhysicalMaterial：设置 color 为 0xffffff、metalness 为 0、roughness 为 0、transmission 为 1、thickness 为 0.5、ior 为 1.5、envMapIntensity 为 1。
10. 车漆材质可用 MeshPhysicalMaterial：设置 color 为 0xff0000、metalness 为 0.9、roughness 为 0.5、clearcoat 为 1、clearcoatRoughness 为 0.1。
11. 使用 MeshToonMaterial 时设置 color 和可选的 gradientMap；它用于 cel-shaded 卡通效果。
12. 为 MeshToonMaterial 创建阶梯渐变纹理：用 `new Uint8Array([0, 128, 255])`、`new THREE.DataTexture(colors, 3, 1, THREE.RedFormat)`，设置 minFilter 和 magFilter 为 THREE.NearestFilter，并设置 needsUpdate = true。
13. 使用 MeshNormalMaterial 时设置 flatShading 和 wireframe；它用于可视化表面法线，适合调试。
14. 使用 MeshDepthMaterial 时设置 depthPacking 为 THREE.RGBADepthPacking；它用于渲染深度值，例如 shadow maps 和 DOF 效果。
15. 使用 PointsMaterial 时设置 color、size、sizeAttenuation、map、alphaMap、transparent、alphaTest、vertexColors，并用 `new THREE.Points(geometry, material)` 创建点云；sizeAttenuation 控制尺寸是否随距离缩放，alphaTest 会丢弃低于阈值的像素。
16. 使用 LineBasicMaterial 时设置 color、linewidth、linecap、linejoin；注意 linewidth 大于 1 只在部分系统生效。
17. 使用 LineDashedMaterial 时设置 color、dashSize、gapSize、scale，创建 `new THREE.Line(geometry, dashedMaterial)` 后必须调用 `line.computeLineDistances();` 才能使虚线生效。
18. 使用 ShaderMaterial 时提供 uniforms、vertexShader、fragmentShader，并设置 transparent、side；可在 uniforms 中放 time、color、texture1，在顶点着色器里通过 uv、position 和 time 修改位置，在片元着色器里采样纹理并输出颜色；GLSL 1.0 用 texture2D()，GLSL 3.0 且 glslVersion 为 THREE.GLSL3 时用 texture()。
19. 在动画循环中更新 ShaderMaterial 的 uniform：执行 `material.uniforms.time.value = clock.getElapsedTime();`。
20. ShaderMaterial 会自动提供顶点着色器内置 uniform：modelMatrix、modelViewMatrix、projectionMatrix、viewMatrix、normalMatrix、cameraPosition；内置 attribute：position、normal、uv。
21. 使用 RawShaderMaterial 时没有内置 uniform/attribute，需要自己声明 precision highp float、attribute vec3 position、uniform mat4 projectionMatrix、uniform mat4 modelViewMatrix，并在顶点着色器里计算 gl_Position，在片元着色器里输出 gl_FragColor。
22. 设置通用可见性属性：material.visible、material.transparent、material.opacity、material.alphaTest；alphaTest 会丢弃 alpha 小于该值的像素。
23. 设置通用渲染属性：material.side 可选 THREE.FrontSide、THREE.BackSide、THREE.DoubleSide；material.depthTest、material.depthWrite、material.colorWrite。
24. 设置通用混合属性：material.blending 可选 THREE.NormalBlending、THREE.AdditiveBlending、THREE.SubtractiveBlending、THREE.MultiplyBlending、THREE.CustomBlending。
25. 设置通用模板属性：material.stencilWrite、material.stencilFunc 为 THREE.AlwaysStencilFunc、material.stencilRef、material.stencilMask。
26. 设置多边形偏移修复 z-fighting：material.polygonOffset、material.polygonOffsetFactor、material.polygonOffsetUnits。
27. 设置其他通用属性：material.dithering、material.toneMapped。
28. 为几何体分配多个材质：对 BoxGeometry 可用 6 个 MeshBasicMaterial 数组分别对应 right、left、top、bottom、front、back，然后执行 `new THREE.Mesh(geometry, materials)`。
29. 自定义材质组：执行 `geometry.clearGroups();` 后按 start、count、materialIndex 调用 `geometry.addGroup(0, 6, 0);` 和 `geometry.addGroup(6, 6, 1);`。
30. 加载立方体环境贴图：用 `new THREE.CubeTextureLoader().load([px.jpg, nx.jpg, py.jpg, ny.jpg, pz.jpg, nz.jpg])` 得到 envMap，再设置 material.envMap 和 material.envMapIntensity；也可设置 scene.environment 影响所有 PBR 材质。
31. 加载 HDR 环境贴图：从 `three/examples/jsm/loaders/RGBELoader.js` 导入 RGBELoader，加载 environment.hdr，设置 texture.mapping 为 THREE.EquirectangularReflectionMapping，再赋给 scene.environment 和 scene.background。
32. 克隆材质：执行 `const clone = material.clone();`，然后修改克隆体，例如 `clone.color.set(0x00ff00);`。
33. 运行时修改材质：直接设置如 `material.color.set(0xff0000);`；只有部分修改需要设置 `material.needsUpdate = true;`。
34. 需要设置 needsUpdate 的典型情况：修改 flat shading、修改 texture、修改 transparent、修改自定义 shader 代码。
35. 性能优化一：复用材质，相同材质可以合并/批处理 draw calls。
36. 性能优化二：尽量避免 transparent，透明材质需要排序。
37. 性能优化三：适用时用 alphaTest 代替 transparency，速度更快。
38. 性能优化四：优先选择更简单的材质，性能顺序大致为 Basic > Lambert > Phong > Standard > Physical。
39. 性能优化五：限制活动灯光数量，每盏灯都会增加着色器复杂度。
40. 材质池化：用 `const materialCache = new Map();` 和 `function getMaterial(color) { const key = color.toString(16); if (!materialCache.has(key)) { materialCache.set(key, new THREE.MeshStandardMaterial({ color })); } return materialCache.get(key); }` 复用材质。
41. 不再使用时释放材质：执行 `material.dispose();`。
42. 需要纹理、着色器或光照与材质交互细节时，查看 threejs-textures、threejs-shaders、threejs-lighting。

适用边界 · 注意事项

• 项目没有使用 Three.js 或不需要 WebGL 渲染时，不要引入 Three.js 材质系统。
• 只是做简单 UI、图标或静态色块时，优先 CSS/SVG/Canvas 2D，避免为小效果引入 WebGL 材质。
• 性能敏感且大量使用透明、Physical 材质或过多灯光时，避免这些高开销材质/配置，改用 Basic、Lambert、alphaTest 并限制灯光。