首页 / three.js / API 文档
MeshPhongMaterial
先看结论
高光网格材质。按 Blinn-Phong 模型逐像素计算光照，能表现塑料、 抛光石材、水面这类有明确高光的表面。
new THREE.MeshPhongMaterial(parameters)
构造参数
| 参数 | 默认 | 说明 |
|---|---|---|
color | 0xffffff | 漫反射颜色 |
specular | 0x111111 | 高光颜色 |
shininess | 30 | 高光锐度，越大越集中 |
emissive | 0x000000 | 自发光颜色，不受光照影响 |
emissiveIntensity | 1 | 自发光强度 |
map | null | 漫反射贴图 |
specularMap | null | 逐像素高光强度，水面、湿地面常用 |
normalMap | null | 法线贴图，需要切线数据 |
normalScale | (1, 1) | 法线强度 |
bumpMap | null | 凹凸贴图，不改变几何 |
bumpScale | 1 | 凹凸幅度 |
displacementMap | null | 位移贴图，真正移动顶点，需要足够细分 |
displacementScale | 1 | 位移幅度 |
flatShading | false | true 时按面片法线着色，得到低多边形风格 |
side | FrontSide | 面朝向 |
transparent / opacity | false / 1 | 透明度 |
示例：湿地面
const material = new THREE.MeshPhongMaterial({
color: 0x9aa3ad,
map: colorMap,
normalMap: normalMap,
normalScale: new THREE.Vector2(0.8, 0.8),
specular: 0x8899aa,
shininess: 90,
specularMap: wetnessMap, // 白色区域高光更强
emissive: 0x000000
});
const ground = new THREE.Mesh(planeGeometry, material);shininess 与行为的对应
| 值 | 观感 |
|---|---|
| 5 到 15 | 高光范围大，像磨砂或橡胶 |
| 30 左右 | 默认值，一般的塑料与涂料 |
| 80 以上 | 高光集中，像抛光金属与水膜 |
shininess 只影响高光的集中程度，亮度由
specular 与光源强度共同决定。高光看不到时，
先把 specular 调亮，再考虑提高 shininess。
与 MeshStandardMaterial 的选择
Phong 的计算更轻，参数直观，适合大量中小物体； Standard 基于物理，金属度与粗糙度的表现更接近真实， 但需要更完整的光照与环境贴图才能出效果。 已有旧项目、移动端低配场景，Phong 仍是性价比很高的选择。
法线贴图需要切线。几何体没有 tangent 属性时，
three.js 会用屏幕导数近似，视觉上可能出现噪点。
大量使用法线贴图时，用 BufferGeometryUtils.computeTangents
提前算好切线。
经纬志（2026）。《MeshPhongMaterial》。https://www.jingweizhi.com/three/api/mesh-phong-material.html（访问日期 2026-11-03）。