ThreeJS Material

Abstract base class for materials.

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.

The following properties and methods are inherited by all other material types (although they may have different defaults).

Constructor

Material()

This creates a generic material.

Properties

.alphaTest : Float

Sets the alpha value to be used when running an alpha test. The material will not be rendered if the opacity is lower than this value. Default is 0.

.alphaToCoverage : Float

Enables alpha to coverage. Can only be used with MSAA-enabled contexts (meaning when the renderer was created with antialias parameter set to true). Default is false.

.blendDst : Integer

Blending destination. Default is OneMinusSrcAlphaFactor. See the destination factors constants for all possible values.

The material's blending must be set to CustomBlending for this to have any effect.

.blendDstAlpha : Integer

The transparency of the .blendDst. Uses .blendDst value if null. Default is null.

.blendEquation : Integer

Blending equation to use when applying blending. Default is AddEquation. See the blending equation constants for all possible values.

The material's blending must be set to CustomBlending for this to have any effect.

.blendEquationAlpha : Integer

The transparency of the .blendEquation. Uses .blendEquation value if null. Default is null.

.blending : Blending

Which blending to use when displaying objects with this material.

This must be set to CustomBlending to use custom blendSrc, blendDst or blendEquation.

See the blending mode constants for all possible values. Default is NormalBlending.

.blendSrc : Integer

Blending source. Default is SrcAlphaFactor. See the source factors constants for all possible values.

The material's blending must be set to CustomBlending for this to have any effect.

.blendSrcAlpha : Integer

The transparency of the .blendSrc. Uses .blendSrc value if null. Default is null.

.clipIntersection : Boolean

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

.clippingPlanes : Array

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). This requires WebGLRenderer.localClippingEnabled to be true. See the WebGL / clipping /intersection example. Default is null.

.clipShadows : Boolean

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

.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.

.defines : Object

Custom defines to be injected into the shader. These are passed in form of an object literal, with key/value pairs. { MY_CUSTOM_DEFINE: '' , PI2: Math.PI * 2 }. The pairs are defined in both vertex and fragment shaders. Default is undefined.

.depthFunc : Integer

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

.depthTest : Boolean

Whether to have depth test enabled when rendering this material. Default is 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.

.stencilWrite : Boolean

Whether stencil operations are performed against the stencil buffer. In order to perform writes or comparisons against the stencil buffer this value must be true. Default is false.

.stencilWriteMask : Integer

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

.stencilFunc : Integer

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

.stencilRef : Integer

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

.stencilFuncMask : Integer

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

.stencilFail : Integer

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

.stencilZFail : Integer

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

.stencilZPass : Integer

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

.fog : Boolean

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

.id : Integer

Unique number for this material instance.

.name : String

Optional name of the object (doesn't need to be unique). Default is an empty string.

.needsUpdate : Boolean

Specifies that the material needs to be recompiled.

.opacity : Float

Float in the range of 0.0 - 1.0 indicating how transparent the material is. A value of 0.0 indicates fully transparent, 1.0 is fully opaque.

If the material's transparent property is not set to true, the material will remain fully opaque and this value will only affect its color.

Default is 1.0.

.polygonOffset : Boolean

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

.polygonOffsetFactor : Integer

Sets the polygon offset factor. Default is 0.

.polygonOffsetUnits : Integer

Sets the polygon offset units. Default is 0.

.precision : String

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

.premultipliedAlpha : Boolean

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

.dithering : Boolean

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

.shadowSide : Integer

Defines which side of faces cast shadows. When set, can be THREE.FrontSide, THREE.BackSide, or THREE.DoubleSide. Default is null.

If null, the side casting shadows is determined as follows:

Material.side          Side casting shadows

THREE.FrontSide  back side

THREE.BackSide  front side

THREE.DoubleSide         both sides

.side : Integer

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

.toneMapped : Boolean

Defines whether this material is tone mapped according to the renderer's toneMapping setting. Default is true.

.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 its opacity property.

Default is false.

.type : String

Value is the string 'Material'. This shouldn't be changed, and can be used to find all objects of this type in a scene.

.uuid : String

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

.version : Integer

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

.vertexColors : Boolean

Defines whether vertex coloring is used. Default is false.

.visible : Boolean

Defines whether this material is visible. Default is true.

.userData : Object

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.

Methods

EventDispatcher methods are available on this class.

.clone ( ) :Material

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

.copy ( material : material ) : this

Copy the parameters from the passed material into this material.

.dispose () :undefined

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

.onBeforeCompile ( shader : Shader, renderer : WebGLRenderer ) : undefined

An optional callback that is executed immediately before the shader program is compiled. This function is called with the shader source code as a parameter. Useful for the modification of built-in materials.

Unlike properties, the callback is not supported by .clone(), .copy() and .toJSON().

.customProgramCacheKey () : String

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 for this material as needed.

For example, if onBeforeCompile contains a conditional statement like:

if ( black ) {


	shader.fragmentShader = shader.fragmentShader.replace('gl_FragColor = vec4(1)', 'gl_FragColor = vec4(0)')


}

then customProgramCacheKey should be set like this:

material.customProgramCacheKey = function() {


	return black ? '1' : '0';


}

Unlike properties, the callback is not supported by .clone(), .copy() and .toJSON().

.setValues ( values : Object ) : undefined

values -- a container with parameters.

Sets the properties based on the values.

.toJSON (meta : Object ) : Object

meta -- object containing metadata such as textures or images for the material.

Convert the material to three.js JSON Object/Scene format.


Related Topics

ThreeJS Keyframe Tracks and Animation

A KeyframeTrack is a timed series of keyframes that are made up of lists of times and related values and are used to animate an object's unique property. BooleanKeyframeTrack A Track of...

3 minutes read.

ThreeJS Object3D

This is the base class for most three.js objects, and it provides a set of properties and methods for manipulating objects in 3D space. It should be noted that this can...

9 minutes read.

ThreeJS Helpers 2

PolarGridHelper The PolarGridHelper is an object to define polar grids. Grids are two-dimensional arrays of lines. Code Example const radius = 10; const radials = 16; const circles = 8; const divisions = 64; const helper =...

4 minutes read.

ThreeJS Matrix Transformations

Three.js encodes 3D transformations using matrices for translations (position), rotations, and scaling. Every Object3D instance has a matrix that records the location, rotation, and scale of the object. This page...

2 minutes read.

ThreeJS Creating VR Content

This article gives a quick introduction of the main components of a three.js-based web-based VR application. Workflow      First, you have to include VRButton.js into your project. import { VRButton } from...

1 minute read.

ThreeJS Loader 1

AnimationLoader Class for loading AnimationClips in JSON format. This uses the FileLoader internally for loading files. Code Example // instantiate a loader const loader = new THREE.AnimationLoader(); // load a resource loader.load( // resource URL 'animations/animation.js', // onLoad callback function...

8 minutes read.

ThreeJS Renderers

WebGLMultipleRenderTargets A special render target that enables a fragment shader to write to several textures. This approach is useful for advanced rendering techniques like post-processing or deferred rendering. Heads up: WebGLMultipleRenderTargets...

15 minutes read.

ThreeJS Cameras

ArrayCamera ArrayCamera can be used to render a scene using a preset group of cameras quickly. This is an important feature of VR scene rendering performance. An array of sub cameras is...

6 minutes read.

ThreeJS AnimationAction

AnimationActions are used to schedule the playback of animations saved in AnimationClips. Note that the majority of AnimationAction's methods can be chained together. The "Animation System" page in the "Next Steps" part...

6 minutes read.

ThreeJS Loaders 2

ImageBitmapLoader A loader that converts an image to an ImageBitmap. An ImageBitmap provides an asynchronous and resource-efficient path for preparing textures for WebGL rendering. ImageBitmapLoader, unlike FileLoader, does not prevent multiple concurrent...

8 minutes read.

ThreeJS Disposing an Object

The disposal of unwanted library entities is a crucial component of improving performance and avoiding memory leaks in your programme. When you create a three.js type instance, you set aside...

4 minutes read.

ThreeJS Installation

You can use npm and modern build tools to install three.js, or you can get started quickly with static hosting or a CDN. Installing from npm is the best option...

4 minutes read.

ThreeJS BufferGeometry

A mesh, line, or point geometry representation. Included within buffers are vertex positions, face indices, normals, colours, UVs, and custom attributes, lowering the cost of passing all of this data...

5 minutes read.

ThreeJS Raycaster

This class is intended to help with raycasting. Raycasting is used for a variety of purposes, including mouse picking (determining which objects in 3D space the mouse is over). Code Example const...

4 minutes read.

ThreeJS Property Binding and Mixer

PropertyBinding Internally, this holds a reference to real property in the scene graph. Constructor PropertyBinding( rootNode : Object3D, path, parsedPath ) -- rootNode: -- path -- parsedPath (optional) Properties The properties are as follows: .path : Number.parsedPath...

2 minutes read.

ThreeJS InterleavedBuffer

The term "interleaved" refers to the packing of multiple attributes, possibly of different types (e.g., position, normal, uv, colour) into a single array buffer. Constructor InterleavedBuffer( array : TypedArray, stride : Integer...

3 minutes read.

ThreeJS AnimationMixer

The AnimationMixer is a player that allows you to play animations on a specific object in the scene. When many items in a scene are animated individually, each object may...

2 minutes read.

ThreeJS Material

Abstract base class for materials. 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...

6 minutes read.

ThreeJS AnimationObjectGroup and Utils

AnimationObjectGroup A group of objects that receives a shared animation state. Usage Add items you'd normally send as 'root' to AnimationMixer's function Object() { [native code] } or clipAction method, and instead pass...

2 minutes read.

ThreeJS Keyframe Track

A KeyframeTrack is a timed series of keyframes that are made up of lists of times and related values and are used to animate an object's unique property. The "Animation System"...

4 minutes read.