Material
Quick answer
Material is the base class defining shared surface behavior: opacity, transparent, side, depthTest, depthWrite, blending, and polygonOffset. Concrete types such as MeshStandardMaterial, MeshBasicMaterial, and LineBasicMaterial add lighting and texture slots on top of these settings. Shared materials reduce renderer state changes, so reuse instances where appearance matches.
new THREE.Material ( parameters ) → Material
Key points
- opacity only takes effect when transparent is true, which also introduces sorting costs.
- side accepts FrontSide, BackSide, or DoubleSide; DoubleSide doubles fragment work.
- Set depthWrite to false for transparent surfaces to avoid blocking objects behind them.
Example
const material = new THREE.MeshStandardMaterial({
color: 0x4f9ef8,
roughness: 0.45,
metalness: 0.12,
transparent: true,
opacity: 0.9,
side: THREE.DoubleSide,
polygonOffset: true,
polygonOffsetFactor: -1,
polygonOffsetUnits: -1
});
material.color.setHex(0xff8844);
material.opacity = 0.6;
material.map = newTexture;
material.needsUpdate = true;Notes
- Changing a material shared by several meshes updates all of them at once.
- Setting needsUpdate unnecessarily forces shader recompiles and stutters frames.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Material. https://www.jingweizhi.com/en/three/api/material.html (accessed 2026-11-03).