MeshBasicMaterial
Quick answer
MeshBasicMaterial renders a solid color and texture without any lighting, making it the cheapest mesh material and the most predictable for flat colors. Use it for labels, backdrops, debug helpers, and surfaces that should keep constant brightness regardless of lights. color multiplies map, so keep color white to show the texture unchanged.
new THREE.MeshBasicMaterial ( parameters )
Key points
- color and map multiply together; set color to white for unmodified texture output.
- vertexColors reads a color attribute for per-vertex tinting.
- wireframe, transparent, opacity, and fog behave as expected without lighting.
Example
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);Notes
- It ignores lights and normals, so 3D forms look flat and lose depth cues.
- Overlapping transparent planes need sorting; depthWrite false is often required.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). MeshBasicMaterial. https://www.jingweizhi.com/en/three/api/mesh-basic-material.html (accessed 2026-11-03).