当前位置：首页 > news >正文

【ThreeJs】【材质Material】核心材质参数解析手册

news 2025/9/20 7:40:39

Three.js 核心材质参数解析手册

以下材质按「常用优先级」排序，参数分为「通用基础参数」和「材质专属参数」，方便按需查找。

核心特点：完全不受光照影响，仅显示纯色/纹理，性能最优。
适用场景：2D效果、线框调试、不需要光照的简单图形（如UI元素、纯色块）。

参数名	类型	取值范围/示例	作用说明
`color`	Color/Number/String	`0xff0000`、`"#ff0000"`、`new THREE.Color('red')`	材质基础颜色，会覆盖纹理的色相（若同时用`map`）。
`transparent`	Boolean	`true`/`false`（默认`false`）	是否启用透明度。必须设为`true`，`opacity`才生效。
`opacity`	Number	0~1（默认1）	整体透明度，0=完全透明，1=完全不透明。
`wireframe`	Boolean	`true`/`false`（默认`false`）	是否将几何体渲染为线框（仅显示顶点连线），适合调试模型结构。
`side`	Number	`THREE.FrontSide`（默认） `THREE.BackSide` `THREE.DoubleSide`	控制渲染几何体的「面」： - FrontSide：只渲染正面（节省性能） - DoubleSide：正反面都渲染（如透明物体）
`map`	Texture	`new THREE.TextureLoader().load('img.png')`	纹理贴图，会覆盖`color`的纯色显示，适合给物体贴图片（如贴纸、花纹）。
`alphaMap`	Texture	同`map`	透明度贴图（灰度图）：白色区域不透明，黑色区域透明，适合精细透明效果（如镂空花纹）。
`visible`	Boolean	`true`/`false`（默认`true`）	控制材质是否可见（隐藏时不渲染，比删除物体更高效）。

因完全不受光照影响，无光照相关参数，参数体系最简单。

核心特点：基于物理的渲染（PBR），模拟真实世界材质（金属、塑料等），必须配合光源使用（否则显示黑色）。
适用场景：绝大多数3D场景（如产品模型、角色、场景道具），追求真实质感。

同「MeshBasicMaterial」的color/transparent/opacity/wireframe/side/map/alphaMap/visible，作用完全一致。

参数名	类型	取值范围/示例	作用说明
`roughness`	Number	0~1（默认0.5）	控制材质的「粗糙程度」： - 0：完全光滑（镜面反射，如玻璃、金属） - 1：完全粗糙（漫反射，如墙面、布料）
`metalness`	Number	0~1（默认0.5）	控制材质的「金属质感」： - 0：非金属（如塑料、石头，反射弱且颜色受`color`影响） - 1：纯金属（反射强，`color`仅影响反射色调）
`roughnessMap`	Texture	同`map`	粗糙度贴图（灰度图）：白色区域更粗糙，黑色区域更光滑，实现局部质感差异（如金属上的划痕）。
`metalnessMap`	Texture	同`map`	金属度贴图（灰度图）：白色区域为金属，黑色区域为非金属，实现混合材质（如带金属边框的塑料壳）。
`normalMap`	Texture	同`map`	法线贴图：通过RGB值模拟表面凹凸（无需修改几何体），提升细节（如木纹、皮革纹理）。
`emissive`	Color/Number/String	同`color`（默认`0x000000`）	自发光颜色：不受光源影响，模拟发光效果（如LED灯、屏幕），亮度可通过`emissiveIntensity`调节。
`emissiveIntensity`	Number	0~∞（默认1）	自发光强度，值越大发光越亮（避免过大导致过曝）。
`aoMap`	Texture	同`map`	环境光遮蔽贴图（灰度图）：黑色区域模拟阴影（如物体缝隙、凹陷），增强立体感。

核心特点：支持基础漫反射（受光源影响），无高光效果，计算量小（性能优于MeshStandardMaterial）。
适用场景：低端设备、不需要高光的场景（如卡通背景、简单几何体）。

同「MeshBasicMaterial」的color/transparent/opacity/wireframe/side/map/alphaMap/visible。

参数名	类型	取值范围/示例	作用说明
`ambient`	Color/Number/String	同`color`（默认`0xffffff`）	环境光反射颜色：控制材质在环境光下的亮度（已逐步被`color`替代，建议直接用`color`）。
`emissive`	Color/Number/String	同`color`（默认`0x000000`）	自发光颜色：同MeshStandardMaterial，不受光源影响。
`emissiveIntensity`	Number	0~∞（默认1）	自发光强度：同MeshStandardMaterial。
`lightMap`	Texture	同`map`	光照贴图：预计算的光照效果（如烘焙的阴影），直接叠加到材质上，减少实时光照计算。

核心特点：支持漫反射+镜面高光（非PBR），高光效果生硬但计算快，适合卡通/复古风格。
适用场景：卡通角色、玩具模型、需要明显高光但不追求真实物理效果的场景。

同「MeshBasicMaterial」的color/transparent/opacity/wireframe/side/map/alphaMap/visible。

参数名	类型	取值范围/示例	作用说明
`specular`	Color/Number/String	`0xffffff`（默认）、`0xffcc00`	高光颜色：控制高光区域的色调（如金色高光设为`0xffcc00`）。
`shininess`	Number	0~1000（默认30）	高光「锐利度」： - 小值（如10）：高光范围大、模糊（如塑料） - 大值（如500）：高光范围小、锐利（如金属）
`specularMap`	Texture	同`map`	高光贴图（灰度图）：白色区域显示高光，黑色区域无高光，实现局部高光（如角色的眼睛高光）。
`emissive`	Color/Number/String	同`color`（默认`0x000000`）	自发光颜色：同前两种材质。

核心特点：模拟卡通渲染效果，明暗过渡有明显「分割线」（无渐变），自带卡通质感。
适用场景：2D卡通角色、动漫场景、低多边形（Low Poly）风格。

同「MeshBasicMaterial」的color/transparent/opacity/wireframe/side/map/alphaMap/visible。

参数名	类型	取值范围/示例	作用说明
`gradientMap`	Texture	`new THREE.CanvasTexture(canvas)`	卡通渐变贴图：控制明暗分割的层级（默认2级，可自定义多级渐变）。例如：用10级灰度图实现更细腻的卡通过渡。
`specular`	Color/Number/String	`0xffffff`（默认）	高光颜色：同MeshPhongMaterial，但高光范围更窄，更符合卡通风格。
`shininess`	Number	0~1000（默认30）	高光锐利度：同MeshPhongMaterial，大值适合卡通金属质感。

需求场景	推荐材质	核心参数组合
纯色块/线框调试	MeshBasicMaterial	`color` + `wireframe`
真实金属/塑料质感	MeshStandardMaterial	`roughness` + `metalness` + `normalMap`
低端设备/无高光场景	MeshLambertMaterial	`color` + `emissive`
卡通高光（如玩具）	MeshPhongMaterial	`specular` + `shininess`
动漫角色/低多边形风格	MeshToonMaterial	`gradientMap` + `specular`