经纬志
首页 / three.js / API 文档

MeshBasicMaterial

先看结论

基础网格材质。不参与光照计算,颜色直接来自材质与贴图, 性能最好,也最容易得到稳定的纯色效果。

最后验证 2026-11-03 · three.js 0.160.0 · 更新 2026-10-29 · 引用本文
new THREE.MeshBasicMaterial(parameters)

构造参数

参数默认说明
color0xffffff材质颜色,会被贴图相乘
mapnull颜色贴图
alphaMapnull透明通道贴图,只读绿色通道
aoMapnull环境光遮蔽贴图,需要第二套 UV
lightMapnull烘焙光照贴图,需要第二套 UV
envMapnull环境反射贴图
combineMultiplyOperation环境贴图混合方式
reflectivity1反射强度
wireframefalse只画三角网边线
vertexColorsfalse读取顶点颜色
sideFrontSideDoubleSide 渲染背面,用于单面片
transparentfalse透明排序
opacity1透明度
fogtrue是否受雾影响
depthTest / depthWritetrue / true深度测试与写入

示例

// 不需要光照的底面,颜色始终一致
const ground = new THREE.Mesh(
  new THREE.PlaneGeometry(200, 200),
  new THREE.MeshBasicMaterial({
    color: 0x22303c,
    transparent: true,
    opacity: 0.85,
    side: THREE.DoubleSide,
    depthWrite: false
  })
);
ground.rotation.x = -Math.PI / 2;
scene.add(ground);

与光照材质的取舍

材质光照适用
MeshBasicMaterial不参与纯色标记、底面、调试辅助、UI 面片
MeshLambertMaterial逐顶点低配设备上的大场景,观感偏平
MeshPhongMaterial逐像素需要高光的地形、水面、金属
MeshStandardMaterial基于物理需要真实感与 PBR 贴图的场景

MeshBasicMaterial 不受灯光影响,场景里的 DirectionalLight 对它没有任何作用。 调试光照时用了这个材质,会误以为灯没生效。

透明面片的排序

多个半透明面片重叠时,关闭 depthWrite 可以避免 前面的面片被后面的挡住,但会带来顺序依赖。 贴地标线、热力面这类始终贴在另一个表面上的元素, 还要配合 polygonOffset 或 renderOrder 防止 z-fighting。

贴图会被颜色相乘。color 为深色时, 贴图整体变暗;需要贴图原色时把 color 设为 0xffffff。 这个规则适用于所有带颜色贴图的材质。

引用本文

经纬志(2026)。《MeshBasicMaterial》。https://www.jingweizhi.com/three/api/mesh-basic-material.html(访问日期 2026-11-03)。