Materials describe the appearance of objects. They are defined in a (mostly) renderer-independent way, so you don't have to rewrite materials if you decide to use a different renderer.

Hierarchy (view full)

Constructors

Properties

Methods

Constructors

Properties

alphaHash: boolean

Enables alpha hashed transparency, an alternative to .transparent or .alphaTest. The material will not be rendered if opacity is lower than a random threshold. Randomization introduces some grain or noise, but approximates alpha blending without the associated problems of sorting. Using TAARenderPass can reduce the resulting noise.

alphaMap: null | Texture
null
alphaTest: number

Sets the alpha value to be used when running an alpha test. Default is 0.

0
alphaToCoverage: boolean

Enables alpha to coverage. Can only be used with MSAA-enabled rendering contexts.

false
anisotropy?: number
0
anisotropyMap?: null | Texture
null
anisotropyRotation?: number
0
aoMap: null | Texture
null
aoMapIntensity: number
1
attenuationColor: Color
Color( 1, 1, 1 )
attenuationDistance: number
0.0
blendAlpha: number

Represents the alpha value of the constant blend color. This property has only an effect when using custom blending with ConstantAlphaFactor or OneMinusConstantAlphaFactor.

0
blendColor: Color

Represent the RGB values of the constant blend color. This property has only an effect when using custom blending with ConstantColorFactor or OneMinusConstantColorFactor.

0x000000

Blending destination. It's one of the blending mode constants defined in Three.js. Default is OneMinusSrcAlphaFactor.

THREE.OneMinusSrcAlphaFactor
blendDstAlpha: null | number

The tranparency of the .blendDst. Default is null.

null
blendEquation: BlendingEquation

Blending equation to use when applying blending. It's one of the constants defined in Three.js. Default is AddEquation.

THREE.AddEquation
blendEquationAlpha: null | number

The tranparency of the .blendEquation. Default is null.

null
blending: Blending

Which blending to use when displaying objects with this material. Default is NormalBlending.

THREE.NormalBlending
blendSrc:
    | 200
    | 201
    | 202
    | 203
    | 204
    | 205
    | 206
    | 207
    | 208
    | 209
    | 210
    | 211
    | 212
    | 213
    | 214

Blending source. It's one of the blending mode constants defined in Three.js. Default is SrcAlphaFactor.

THREE.SrcAlphaFactor
blendSrcAlpha: null | number

The tranparency of the .blendSrc. Default is null.

null
bumpMap: null | Texture
null
bumpScale: number
1
clearcoat: number
0
clearcoatMap: null | Texture
null
clearcoatNormalMap: null | Texture
null
clearcoatNormalScale: Vector2
new THREE.Vector2( 1, 1 )
clearcoatRoughness: number
0
clearcoatRoughnessMap: null | Texture
null
clipIntersection: boolean

Changes the behavior of clipping planes so that only their intersection is clipped, rather than their union. Default is false.

false
clippingPlanes: null | Plane[]

User-defined clipping planes specified as THREE.Plane objects in world space. These planes apply to the objects this material is attached to. Points in space whose signed distance to the plane is negative are clipped (not rendered). See the WebGL / clipping /intersection example. Default is null.

null
clipShadows: boolean

Defines whether to clip shadows according to the clipping planes specified on this material. Default is false.

false
color: Color
new THREE.Color( 0xffffff )
colorWrite: boolean

Whether to render the material's color. This can be used in conjunction with a mesh's .renderOrder property to create invisible objects that occlude other objects. Default is true.

true
defines: {
    [key: string]: any;
}
{ 'STANDARD': '', 'PHYSICAL': '' }
depthFunc: DepthModes

Which depth function to use. Default is LessEqualDepth. See the depth mode constants for all possible values.

THREE.LessEqualDepth
depthTest: boolean

Whether to have depth test enabled when rendering this material. When the depth test is disabled, the depth write will also be implicitly disabled.

true
depthWrite: boolean

Whether rendering this material has any effect on the depth buffer. Default is true. When drawing 2D overlays it can be useful to disable the depth writing in order to layer several things together without creating z-index artifacts.

true
displacementBias: number
0
displacementMap: null | Texture
null
displacementScale: number
1
dithering: boolean

Whether to apply dithering to the color to remove the appearance of banding. Default is false.

false
emissive: Color
new THREE.Color( 0x000000 )
emissiveIntensity: number
1
emissiveMap: null | Texture
null
envMap: null | Texture
null
envMapIntensity: number
1
flatShading: boolean

Define whether the material is rendered with flat shading. Default is false.

false
fog: boolean

Whether the material is affected by fog. Default is true.

fog
forceSinglePass: boolean
false
id: number

Unique number of this material instance.

ior: number
1.5
iridescence: number
0
iridescenceIOR: number
1.3
iridescenceMap: null | Texture
null
iridescenceThicknessMap: null | Texture
null
iridescenceThicknessRange: [number, number]
[100, 400]
isMaterial

Read-only flag to check if a given object is of type Material.

This is a constant value

true

isMeshPhysicalMaterial

Read-only flag to check if a given object is of type MeshPhysicalMaterial.

This is a constant value

true

isMeshStandardMaterial

Read-only flag to check if a given object is of type MeshStandardMaterial.

This is a constant value

true

lightMap: null | Texture
null
lightMapIntensity: number
1
map: null | Texture
null
metalness: number
0
metalnessMap: null | Texture
null
name: string

Material name. Default is an empty string.

''
needsUpdate: boolean

Specifies that the material needs to be updated, WebGL wise. Set it to true if you made changes that need to be reflected in WebGL. This property is automatically set to true when instancing a new material.

false
normalMap: null | Texture
null
normalMapType: NormalMapTypes
THREE.TangentSpaceNormalMap
normalScale: Vector2
new THREE.Vector2( 1, 1 )
opacity: number

Opacity. Default is 1.

1
polygonOffset: boolean

Whether to use polygon offset. Default is false. This corresponds to the POLYGON_OFFSET_FILL WebGL feature.

false
polygonOffsetFactor: number

Sets the polygon offset factor. Default is 0.

0
polygonOffsetUnits: number

Sets the polygon offset units. Default is 0.

0
precision:
    | null
    | "highp"
    | "mediump"
    | "lowp"

Override the renderer's default precision for this material. Can be "highp", "mediump" or "lowp". Defaults is null.

null
premultipliedAlpha: boolean

Whether to premultiply the alpha (transparency) value. See WebGL / Materials / Transparency for an example of the difference. Default is false.

false
reflectivity: number
0.5
roughness: number
1
roughnessMap: null | Texture
null
shadowSide: null | Side

Defines which of the face sides will cast shadows. Default is null. If null, the value is opposite that of side, above.

null
sheen: number
0.0
sheenColor: Color
Color( 0x000000 )
sheenColorMap: null | Texture
null
sheenRoughness: number
1.0
sheenRoughnessMap: null | Texture
null
side: Side

Defines which of the face sides will be rendered - front, back or both. Default is THREE.FrontSide. Other options are THREE.BackSide and THREE.DoubleSide.

specularColor: Color
Color(1, 1, 1)
specularColorMap: null | Texture
null
specularIntensity: number
1.0
specularIntensityMap: null | Texture
null
stencilFail: StencilOp

Which stencil operation to perform when the comparison function returns false. Default is KeepStencilOp. See the stencil operation constants for all possible values.

THREE.KeepStencilOp
stencilFunc: StencilFunc

The stencil comparison function to use. Default is AlwaysStencilFunc. See stencil operation constants for all possible values.

THREE.AlwaysStencilFunc
stencilFuncMask: number

The bit mask to use when comparing against the stencil buffer. Default is 0xFF.

0xff
stencilRef: number

The value to use when performing stencil comparisons or stencil operations. Default is 0.

0
stencilWrite: boolean

Whether rendering this material has any effect on the stencil buffer. Default is false.

false
stencilWriteMask: number

The bit mask to use when writing to the stencil buffer. Default is 0xFF.

0xff
stencilZFail: StencilOp

Which stencil operation to perform when the comparison function returns true but the depth test fails. Default is KeepStencilOp. See the stencil operation constants for all possible values.

THREE.KeepStencilOp
stencilZPass: StencilOp

Which stencil operation to perform when the comparison function returns true and the depth test passes. Default is KeepStencilOp. See the stencil operation constants for all possible values.

THREE.KeepStencilOp
thickness: number
0.01
thicknessMap: null | Texture
null
toneMapped: boolean

Defines whether this material is tone mapped according to the renderer's toneMapping setting. It is ignored when rendering to a render target.

true
transmission: number
0
transmissionMap: null | Texture
null
transparent: boolean

Defines whether this material is transparent. This has an effect on rendering as transparent objects need special treatment and are rendered after non-transparent objects. When set to true, the extent to which the material is transparent is controlled by setting it's .opacity property.

false
type: string
'MeshPhysicalMaterial'
userData: Record<string, any>

An object that can be used to store custom data about the Material. It should not hold references to functions as these will not be cloned.

{}
uuid: string

UUID of this material instance. This gets automatically assigned, so this shouldn't be edited.

version: number

This starts at 0 and counts how many times .needsUpdate is set to true.

0
vertexColors: boolean

Defines whether vertex coloring is used. Default is false.

false
visible: boolean

Defines whether this material is visible. Default is true.

true
wireframe: boolean
false
wireframeLinecap: string
'round'
wireframeLinejoin: string
'round'
wireframeLinewidth: number
1

Methods

  • Return a new material with the same parameters as this material.

    Returns this

  • Copy the parameters from the passed material into this material.

    Parameters

    Returns this

  • In case onBeforeCompile is used, this callback can be used to identify values of settings used in onBeforeCompile, so three.js can reuse a cached shader or recompile the shader as needed.

    Returns string

  • Fire an event type.

    Type Parameters

    • T extends "dispose"

    Parameters

    • event: BaseEvent<T> & {
          dispose: {};
      }[T]

      The event that gets fired.

    Returns void

  • This disposes the material. Textures of a material don't get disposed. These needs to be disposed by Texture.

    Returns void

  • Checks if listener is added to an event type.

    Type Parameters

    • T extends "dispose"

    Parameters

    Returns boolean

  • Type Parameters

    • T extends string

    Parameters

    Returns boolean

  • An optional callback that is executed immediately before the shader program is compiled. This function is called with the associated WebGL program parameters and renderer. Useful for the modification of built-in materials.

    Parameters

    Returns void

  • Convert the material to three.js JSON format.

    Parameters

    • Optionalmeta: any

      Object containing metadata such as textures or images for the material.

    Returns any