tessl/npm-three
JavaScript 3D library providing WebGL and WebGPU renderers for creating interactive 3D graphics in web browsers
—
Pending
materials.mddocs/
Materials
Material system defining surface appearance, lighting response, and rendering properties for 3D objects. Materials control how light interacts with surfaces through physically-based and artistic shading models.
Capabilities
Material Base Class
Abstract foundation providing common material properties for blending, transparency, culling, and rendering state.
import {
Material,
EventDispatcher,
Color,
Texture,
Plane,
Side,
Blending,
BlendingEquation,
BlendingFactor,
DepthMode,
StencilFunc,
StencilOp
} from 'three';
/**
* Abstract base class for all materials defining surface appearance
*/
abstract class Material extends EventDispatcher {
/** Type flag for material detection */
readonly isMaterial: true;
/** Unique material ID */
readonly id: number;
/** UUID string identifier */
readonly uuid: string;
/** Material name */
name: string;
/** Material type string */
readonly type: string;
/** Fog affect material */
fog: boolean;
/** Blending mode */
blending: Blending;
/** Face culling side */
side: Side;
/** Use vertex colors */
vertexColors: boolean;
/** Material opacity (0-1) */
opacity: number;
/** Enable transparency */
transparent: boolean;
/** Alpha hashed transparency */
alphaHash: boolean;
/** Alpha test threshold */
alphaTest: number;
/** Alpha test texture */
alphaMap: Texture | null;
/** Blending source factor */
blendSrc: BlendingFactor;
/** Blending destination factor */
blendDst: BlendingFactor;
/** Blending equation */
blendEquation: BlendingEquation;
/** Alpha channel blending source */
blendSrcAlpha: BlendingFactor | null;
/** Alpha channel blending destination */
blendDstAlpha: BlendingFactor | null;
/** Alpha channel blending equation */
blendEquationAlpha: BlendingEquation | null;
/** Constant blend color */
blendColor: Color;
/** Constant blend alpha */
blendAlpha: number;
/** Enable depth testing */
depthTest: boolean;
/** Enable depth writing */
depthWrite: boolean;
/** Depth comparison function */
depthFunc: DepthMode;
/** Enable stencil testing */
stencilWrite: boolean;
/** Stencil test function */
stencilFunc: StencilFunc;
/** Stencil reference value */
stencilRef: number;
/** Stencil function mask */
stencilFuncMask: number;
/** Stencil fail operation */
stencilFail: StencilOp;
/** Stencil Z-fail operation */
stencilZFail: StencilOp;
/** Stencil Z-pass operation */
stencilZPass: StencilOp;
/** Stencil write mask */
stencilWriteMask: number;
/** Clipping planes */
clippingPlanes: Plane[] | null;
/** Clip intersection mode */
clipIntersection: boolean;
/** Clip shadows */
clipShadows: boolean;
/** Color write mask */
colorWrite: boolean;
/** Polygon offset */
polygonOffset: boolean;
/** Polygon offset factor */
polygonOffsetFactor: number;
/** Polygon offset units */
polygonOffsetUnits: number;
/** Dithering */
dithering: boolean;
/** Premultiplied alpha */
premultipliedAlpha: boolean;
/** Force single pass rendering */
forceSinglePass: boolean;
/** Material visible */
visible: boolean;
/** Tone mapping */
toneMapped: boolean;
/** User data */
userData: Record<string, any>;
/** Material version for cache invalidation */
readonly version: number;
/**
* Create material base
*/
constructor();
/**
* Called when material needs compilation
* @param parameters - Shader compilation parameters
*/
onBuild(shaderData: any, renderer: any): void;
/**
* Called before rendering for custom uniforms
* @param shader - Shader program
* @param renderer - WebGL renderer
* @param scene - Scene being rendered
* @param camera - Active camera
* @param geometry - Object geometry
* @param object - Object being rendered
*/
onBeforeRender(
renderer: any,
scene: any,
camera: any,
geometry: any,
object: any,
group: any
): void;
/**
* Called before compiling shader
* @param shader - Shader object
* @param renderer - WebGL renderer
*/
onBeforeCompile(shader: any, renderer: any): void;
/**
* Get custom shader modification
* @param shader - Base shader
* @returns Modified shader or null
*/
customProgramCacheKey(): string;
/**
* Set material properties from object
* @param values - Property values
* @returns This material for chaining
*/
setValues(values: Record<string, any>): this;
/**
* Serialize to JSON
* @param meta - Metadata object
* @returns JSON representation
*/
toJSON(meta?: any): any;
/**
* Clone material
* @returns Cloned material
*/
clone(): this;
/**
* Copy properties from another material
* @param source - Source material
* @returns This material for chaining
*/
copy(source: Material): this;
/**
* Dispose material resources
*/
dispose(): void;
}Usage Examples:
import { Material, Color, AdditiveBlending, DoubleSide } from 'three';
// Material configuration
material.transparent = true;
material.opacity = 0.7;
material.side = DoubleSide;
material.blending = AdditiveBlending;
// Depth and stencil
material.depthTest = false;
material.depthWrite = false;
// Custom uniforms
material.onBeforeRender = function(renderer, scene, camera, geometry, object) {
this.uniforms.time.value = performance.now() / 1000;
};
// Material versioning
material.needsUpdate = true; // Forces recompilationPhysically Based Materials
Modern PBR materials using metallic-roughness workflow for realistic lighting and surface response.
import {
MeshStandardMaterial,
MeshPhysicalMaterial,
Material,
Color,
Texture,
Vector2,
NormalMapType
} from 'three';
/**
* Physically-based standard material using metallic-roughness workflow
*/
class MeshStandardMaterial extends Material {
/** Type flag for standard material detection */
readonly isMeshStandardMaterial: true;
/** Shader defines */
defines: Record<string, any>;
/** Base color (albedo) */
color: Color;
/** Surface roughness (0 = mirror, 1 = fully rough) */
roughness: number;
/** Metallic property (0 = dielectric, 1 = metallic) */
metalness: number;
/** Albedo/diffuse texture */
map: Texture | null;
/** Lightmap texture */
lightMap: Texture | null;
/** Lightmap intensity */
lightMapIntensity: number;
/** Ambient occlusion map */
aoMap: Texture | null;
/** AO map intensity */
aoMapIntensity: number;
/** Emissive color */
emissive: Color;
/** Emissive intensity */
emissiveIntensity: number;
/** Emissive texture */
emissiveMap: Texture | null;
/** Bump map for surface detail */
bumpMap: Texture | null;
/** Bump map scale */
bumpScale: number;
/** Normal map for surface normals */
normalMap: Texture | null;
/** Normal map type */
normalMapType: NormalMapType;
/** Normal map scale */
normalScale: Vector2;
/** Displacement map */
displacementMap: Texture | null;
/** Displacement scale */
displacementScale: number;
/** Displacement bias */
displacementBias: number;
/** Roughness map */
roughnessMap: Texture | null;
/** Metalness map */
metalnessMap: Texture | null;
/** Environment map */
envMap: Texture | null;
/** Environment map intensity */
envMapIntensity: number;
/** Environment map rotation */
envMapRotation: Euler;
/** Wireframe mode */
wireframe: boolean;
/** Wireframe line width */
wireframeLinewidth: number;
/** Wireframe line cap */
wireframeLinecap: string;
/** Wireframe line join */
wireframeLinejoin: string;
/** Flat shading */
flatShading: boolean;
/**
* Create standard material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<MeshStandardMaterial>);
/**
* Copy properties from another standard material
* @param source - Source material
* @returns This material for chaining
*/
copy(source: MeshStandardMaterial): this;
}
/**
* Extended physically-based material with additional effects
*/
class MeshPhysicalMaterial extends MeshStandardMaterial {
/** Type flag for physical material detection */
readonly isMeshPhysicalMaterial: true;
/** Clearcoat layer intensity */
clearcoat: number;
/** Clearcoat roughness */
clearcoatRoughness: number;
/** Clearcoat texture */
clearcoatMap: Texture | null;
/** Clearcoat roughness map */
clearcoatRoughnessMap: Texture | null;
/** Clearcoat normal map */
clearcoatNormalMap: Texture | null;
/** Clearcoat normal scale */
clearcoatNormalScale: Vector2;
/** Index of refraction (IOR) */
ior: number;
/** Reflectivity for non-metals */
reflectivity: number;
/** Iridescence effect intensity */
iridescence: number;
/** Iridescence texture */
iridescenceMap: Texture | null;
/** Iridescence index of refraction */
iridescenceIOR: number;
/** Iridescence thickness range */
iridescenceThicknessRange: [number, number];
/** Iridescence thickness map */
iridescenceThicknessMap: Texture | null;
/** Sheen effect intensity */
sheen: number;
/** Sheen color */
sheenColor: Color;
/** Sheen color map */
sheenColorMap: Texture | null;
/** Sheen roughness */
sheenRoughness: number;
/** Sheen roughness map */
sheenRoughnessMap: Texture | null;
/** Transmission for glass-like materials */
transmission: number;
/** Transmission map */
transmissionMap: Texture | null;
/** Thickness for subsurface scattering */
thickness: number;
/** Thickness map */
thicknessMap: Texture | null;
/** Attenuation distance */
attenuationDistance: number;
/** Attenuation color */
attenuationColor: Color;
/** Specular intensity */
specularIntensity: number;
/** Specular intensity map */
specularIntensityMap: Texture | null;
/** Specular color */
specularColor: Color;
/** Specular color map */
specularColorMap: Texture | null;
/** Anisotropy for stretched highlights */
anisotropy: number;
/** Anisotropy rotation */
anisotropyRotation: number;
/** Anisotropy map */
anisotropyMap: Texture | null;
/**
* Create physical material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<MeshPhysicalMaterial>);
}Usage Examples:
import { MeshStandardMaterial, MeshPhysicalMaterial, TextureLoader } from 'three';
// Standard PBR material
const standardMaterial = new MeshStandardMaterial({
color: 0x808080,
roughness: 0.4,
metalness: 0.1
});
// Load textures
const loader = new TextureLoader();
const albedo = loader.load('textures/albedo.jpg');
const normal = loader.load('textures/normal.jpg');
const roughness = loader.load('textures/roughness.jpg');
const metalness = loader.load('textures/metalness.jpg');
const ao = loader.load('textures/ao.jpg');
// Textured material
const texturedMaterial = new MeshStandardMaterial({
map: albedo,
normalMap: normal,
roughnessMap: roughness,
metalnessMap: metalness,
aoMap: ao,
aoMapIntensity: 1.0
});
// Car paint material
const carPaint = new MeshPhysicalMaterial({
color: 0x0066cc,
roughness: 0.05,
metalness: 0.9,
clearcoat: 1.0,
clearcoatRoughness: 0.03
});
// Glass material
const glass = new MeshPhysicalMaterial({
color: 0xffffff,
roughness: 0,
metalness: 0,
transmission: 1,
transparent: true,
ior: 1.5
});
// Fabric with sheen
const fabric = new MeshPhysicalMaterial({
color: 0x440066,
roughness: 0.8,
metalness: 0,
sheen: 1,
sheenColor: new Color(0x663399),
sheenRoughness: 0.5
});Basic Materials
Simple materials for unlit surfaces, debugging, and special effects without complex lighting calculations.
import {
MeshBasicMaterial,
MeshLambertMaterial,
MeshPhongMaterial,
MeshToonMaterial,
MeshNormalMaterial,
MeshMatcapMaterial,
MeshDepthMaterial,
MeshDistanceMaterial,
LineBasicMaterial,
LineDashedMaterial,
PointsMaterial,
SpriteMaterial,
ShadowMaterial
} from 'three';
/**
* Basic material without lighting calculations
*/
class MeshBasicMaterial extends Material {
/** Type flag for basic material detection */
readonly isMeshBasicMaterial: true;
/** Base color */
color: Color;
/** Color texture */
map: Texture | null;
/** Lightmap texture */
lightMap: Texture | null;
/** Lightmap intensity */
lightMapIntensity: number;
/** Ambient occlusion map */
aoMap: Texture | null;
/** AO intensity */
aoMapIntensity: number;
/** Specular map for reflectivity */
specularMap: Texture | null;
/** Alpha map */
alphaMap: Texture | null;
/** Environment map */
envMap: Texture | null;
/** Environment map rotation */
envMapRotation: Euler;
/** Combine mode for environment map */
combine: Combine;
/** Reflectivity for environment map */
reflectivity: number;
/** Refraction ratio for environment map */
refractionRatio: number;
/** Wireframe mode */
wireframe: boolean;
/** Wireframe line width */
wireframeLinewidth: number;
/** Wireframe line cap */
wireframeLinecap: string;
/** Wireframe line join */
wireframeLinejoin: string;
/**
* Create basic material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<MeshBasicMaterial>);
}
/**
* Lambert diffuse material
*/
class MeshLambertMaterial extends Material {
/** Type flag for Lambert material detection */
readonly isMeshLambertMaterial: true;
/** Diffuse color */
color: Color;
/** Diffuse texture */
map: Texture | null;
/** Lightmap texture */
lightMap: Texture | null;
/** Lightmap intensity */
lightMapIntensity: number;
/** Ambient occlusion map */
aoMap: Texture | null;
/** AO intensity */
aoMapIntensity: number;
/** Emissive color */
emissive: Color;
/** Emissive intensity */
emissiveIntensity: number;
/** Emissive texture */
emissiveMap: Texture | null;
/** Specular map */
specularMap: Texture | null;
/** Alpha map */
alphaMap: Texture | null;
/** Environment map */
envMap: Texture | null;
/** Environment map rotation */
envMapRotation: Euler;
/** Environment map intensity */
envMapIntensity: number;
/** Combine mode */
combine: Combine;
/** Reflectivity */
reflectivity: number;
/** Refraction ratio */
refractionRatio: number;
/** Wireframe mode */
wireframe: boolean;
/** Wireframe line width */
wireframeLinewidth: number;
/** Wireframe line cap */
wireframeLinecap: string;
/** Wireframe line join */
wireframeLinejoin: string;
/**
* Create Lambert material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<MeshLambertMaterial>);
}
/**
* Phong material with specular highlights
*/
class MeshPhongMaterial extends Material {
/** Type flag for Phong material detection */
readonly isMeshPhongMaterial: true;
/** Diffuse color */
color: Color;
/** Specular color */
specular: Color;
/** Specular shininess */
shininess: number;
/** Diffuse texture */
map: Texture | null;
/** Lightmap texture */
lightMap: Texture | null;
/** Lightmap intensity */
lightMapIntensity: number;
/** Ambient occlusion map */
aoMap: Texture | null;
/** AO intensity */
aoMapIntensity: number;
/** Emissive color */
emissive: Color;
/** Emissive intensity */
emissiveIntensity: number;
/** Emissive texture */
emissiveMap: Texture | null;
/** Bump map */
bumpMap: Texture | null;
/** Bump scale */
bumpScale: number;
/** Normal map */
normalMap: Texture | null;
/** Normal map type */
normalMapType: NormalMapType;
/** Normal map scale */
normalScale: Vector2;
/** Displacement map */
displacementMap: Texture | null;
/** Displacement scale */
displacementScale: number;
/** Displacement bias */
displacementBias: number;
/** Specular map */
specularMap: Texture | null;
/** Alpha map */
alphaMap: Texture | null;
/** Environment map */
envMap: Texture | null;
/** Environment map rotation */
envMapRotation: Euler;
/** Environment map intensity */
envMapIntensity: number;
/** Combine mode */
combine: Combine;
/** Reflectivity */
reflectivity: number;
/** Refraction ratio */
refractionRatio: number;
/** Wireframe mode */
wireframe: boolean;
/** Flat shading */
flatShading: boolean;
/**
* Create Phong material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<MeshPhongMaterial>);
}
/**
* Toon/cartoon shading material
*/
class MeshToonMaterial extends Material {
/** Type flag for toon material detection */
readonly isMeshToonMaterial: true;
/** Diffuse color */
color: Color;
/** Diffuse texture */
map: Texture | null;
/** Gradient map for toon shading */
gradientMap: Texture | null;
/** Lightmap texture */
lightMap: Texture | null;
/** Lightmap intensity */
lightMapIntensity: number;
/** Ambient occlusion map */
aoMap: Texture | null;
/** AO intensity */
aoMapIntensity: number;
/** Emissive color */
emissive: Color;
/** Emissive intensity */
emissiveIntensity: number;
/** Emissive texture */
emissiveMap: Texture | null;
/** Bump map */
bumpMap: Texture | null;
/** Bump scale */
bumpScale: number;
/** Normal map */
normalMap: Texture | null;
/** Normal map type */
normalMapType: NormalMapType;
/** Normal map scale */
normalScale: Vector2;
/** Displacement map */
displacementMap: Texture | null;
/** Displacement scale */
displacementScale: number;
/** Displacement bias */
displacementBias: number;
/** Alpha map */
alphaMap: Texture | null;
/** Wireframe mode */
wireframe: boolean;
/**
* Create toon material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<MeshToonMaterial>);
}
/**
* Material displaying surface normals as colors
*/
class MeshNormalMaterial extends Material {
/** Type flag for normal material detection */
readonly isMeshNormalMaterial: true;
/** Bump map */
bumpMap: Texture | null;
/** Bump scale */
bumpScale: number;
/** Normal map */
normalMap: Texture | null;
/** Normal map type */
normalMapType: NormalMapType;
/** Normal map scale */
normalScale: Vector2;
/** Displacement map */
displacementMap: Texture | null;
/** Displacement scale */
displacementScale: number;
/** Displacement bias */
displacementBias: number;
/** Wireframe mode */
wireframe: boolean;
/** Flat shading */
flatShading: boolean;
/**
* Create normal material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<MeshNormalMaterial>);
}
/**
* Matcap material using spherical environment mapping
*/
class MeshMatcapMaterial extends Material {
/** Type flag for matcap material detection */
readonly isMeshMatcapMaterial: true;
/** Base color */
color: Color;
/** Matcap texture (spherical environment map) */
matcap: Texture | null;
/** Color texture */
map: Texture | null;
/** Bump map */
bumpMap: Texture | null;
/** Bump scale */
bumpScale: number;
/** Normal map */
normalMap: Texture | null;
/** Normal map type */
normalMapType: NormalMapType;
/** Normal map scale */
normalScale: Vector2;
/** Displacement map */
displacementMap: Texture | null;
/** Displacement scale */
displacementScale: number;
/** Displacement bias */
displacementBias: number;
/** Alpha map */
alphaMap: Texture | null;
/** Flat shading */
flatShading: boolean;
/**
* Create matcap material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<MeshMatcapMaterial>);
}Usage Examples:
import {
MeshBasicMaterial,
MeshLambertMaterial,
MeshPhongMaterial,
MeshToonMaterial,
MeshNormalMaterial,
Color
} from 'three';
// Unlit basic material
const basic = new MeshBasicMaterial({
color: 0xff0000,
wireframe: true
});
// Simple diffuse lighting
const lambert = new MeshLambertMaterial({
color: 0x00ff00
});
// Phong with specular highlights
const phong = new MeshPhongMaterial({
color: 0x0000ff,
specular: new Color(0x222222),
shininess: 100
});
// Cartoon/anime style
const toon = new MeshToonMaterial({
color: 0xffaa00
});
// Debug normals
const normal = new MeshNormalMaterial();
// Matcap for stylized look
const matcap = new MeshMatcapMaterial({
matcap: matcapTexture
});Line and Point Materials
Specialized materials for line rendering and point clouds with custom styling options.
import {
LineBasicMaterial,
LineDashedMaterial,
PointsMaterial,
SpriteMaterial
} from 'three';
/**
* Basic line material
*/
class LineBasicMaterial extends Material {
/** Type flag for line basic material detection */
readonly isLineBasicMaterial: true;
/** Line color */
color: Color;
/** Line width (limited platform support) */
linewidth: number;
/** Line cap style */
linecap: string;
/** Line join style */
linejoin: string;
/**
* Create basic line material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<LineBasicMaterial>);
}
/**
* Dashed line material
*/
class LineDashedMaterial extends LineBasicMaterial {
/** Type flag for dashed material detection */
readonly isLineDashedMaterial: true;
/** Dash scale */
scale: number;
/** Dash size */
dashSize: number;
/** Gap size */
gapSize: number;
/**
* Create dashed line material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<LineDashedMaterial>);
}
/**
* Point cloud material
*/
class PointsMaterial extends Material {
/** Type flag for points material detection */
readonly isPointsMaterial: true;
/** Point color */
color: Color;
/** Point texture */
map: Texture | null;
/** Alpha map */
alphaMap: Texture | null;
/** Point size */
size: number;
/** Size attenuation with distance */
sizeAttenuation: boolean;
/**
* Create points material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<PointsMaterial>);
}
/**
* 2D sprite material (always faces camera)
*/
class SpriteMaterial extends Material {
/** Type flag for sprite material detection */
readonly isSpriteMaterial: true;
/** Sprite color */
color: Color;
/** Sprite texture */
map: Texture | null;
/** Alpha map */
alphaMap: Texture | null;
/** Sprite rotation */
rotation: number;
/** Size attenuation */
sizeAttenuation: boolean;
/**
* Create sprite material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<SpriteMaterial>);
}Usage Examples:
import {
LineBasicMaterial,
LineDashedMaterial,
PointsMaterial,
SpriteMaterial
} from 'three';
// Basic line
const line = new LineBasicMaterial({
color: 0xff0000,
linewidth: 2
});
// Dashed line
const dashed = new LineDashedMaterial({
color: 0x00ff00,
linewidth: 1,
scale: 1,
dashSize: 3,
gapSize: 1
});
// Point cloud
const points = new PointsMaterial({
color: 0x0000ff,
size: 5,
sizeAttenuation: true
});
// Sprite/billboard
const sprite = new SpriteMaterial({
map: texture,
color: 0xffffff
});Shader Materials
Custom shader materials for advanced effects and specialized rendering techniques.
import {
ShaderMaterial,
RawShaderMaterial,
Material,
IUniform,
Shader
} from 'three';
/**
* Custom shader material with Three.js uniforms
*/
class ShaderMaterial extends Material {
/** Type flag for shader material detection */
readonly isShaderMaterial: true;
/** Shader defines */
defines: Record<string, any>;
/** Shader uniforms */
uniforms: Record<string, IUniform>;
/** Vertex shader source */
vertexShader: string;
/** Fragment shader source */
fragmentShader: string;
/** Line width */
linewidth: number;
/** Wireframe mode */
wireframe: boolean;
/** Wireframe line width */
wireframeLinewidth: number;
/** Flat shading */
flatShading: boolean;
/** Enable lights */
lights: boolean;
/** Enable clipping */
clipping: boolean;
/** Extensions */
extensions: {
derivatives?: boolean;
fragDepth?: boolean;
drawBuffers?: boolean;
shaderTextureLOD?: boolean;
clipCullDistance?: boolean;
multiDraw?: boolean;
};
/** GL state overrides */
glslVersion?: string;
/**
* Create shader material
* @param parameters - Material parameters including shaders and uniforms
*/
constructor(parameters?: Partial<ShaderMaterial>);
/**
* Clone shader material
* @returns Cloned material
*/
clone(): this;
/**
* Copy from another shader material
* @param source - Source material
* @returns This material for chaining
*/
copy(source: ShaderMaterial): this;
}
/**
* Raw shader material without Three.js built-in uniforms
*/
class RawShaderMaterial extends ShaderMaterial {
/** Type flag for raw shader material detection */
readonly isRawShaderMaterial: true;
/**
* Create raw shader material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<RawShaderMaterial>);
}
/**
* Interface for uniform values
*/
interface IUniform<T = any> {
value: T;
}
/**
* Shader compilation result
*/
interface Shader {
uniforms: Record<string, IUniform>;
vertexShader: string;
fragmentShader: string;
defines?: Record<string, any>;
}Usage Examples:
import { ShaderMaterial, RawShaderMaterial, Vector3, Color } from 'three';
// Custom shader material
const customMaterial = new ShaderMaterial({
uniforms: {
time: { value: 0 },
color: { value: new Color(0xff0000) },
resolution: { value: new Vector3(1024, 768, 1) }
},
vertexShader: `
void main() {
gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
uniform float time;
uniform vec3 color;
uniform vec3 resolution;
void main() {
vec2 uv = gl_FragCoord.xy / resolution.xy;
vec3 col = color * (sin(time + uv.x * 10.0) * 0.5 + 0.5);
gl_FragColor = vec4(col, 1.0);
}
`,
transparent: true
});
// Raw shader (no Three.js uniforms)
const rawMaterial = new RawShaderMaterial({
uniforms: {
mvpMatrix: { value: new Matrix4() }
},
vertexShader: `
precision mediump float;
uniform mat4 mvpMatrix;
attribute vec3 position;
void main() {
gl_Position = mvpMatrix * vec4(position, 1.0);
}
`,
fragmentShader: `
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
}
`
});
// Update uniforms in render loop
function animate() {
customMaterial.uniforms.time.value = performance.now() / 1000;
renderer.render(scene, camera);
requestAnimationFrame(animate);
}Special Materials
Utility materials for debugging, shadows, and special rendering effects.
import {
MeshDepthMaterial,
MeshDistanceMaterial,
ShadowMaterial
} from 'three';
/**
* Material for rendering depth values
*/
class MeshDepthMaterial extends Material {
/** Type flag for depth material detection */
readonly isMeshDepthMaterial: true;
/** Depth packing type */
depthPacking: DepthPackingStrategies;
/** Displacement map */
displacementMap: Texture | null;
/** Displacement scale */
displacementScale: number;
/** Displacement bias */
displacementBias: number;
/** Alpha map */
alphaMap: Texture | null;
/** Wireframe mode */
wireframe: boolean;
/**
* Create depth material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<MeshDepthMaterial>);
}
/**
* Material for rendering distance from point
*/
class MeshDistanceMaterial extends Material {
/** Type flag for distance material detection */
readonly isMeshDistanceMaterial: true;
/** Reference position for distance calculation */
referencePosition: Vector3;
/** Near distance */
nearDistance: number;
/** Far distance */
farDistance: number;
/** Displacement map */
displacementMap: Texture | null;
/** Displacement scale */
displacementScale: number;
/** Displacement bias */
displacementBias: number;
/** Alpha map */
alphaMap: Texture | null;
/**
* Create distance material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<MeshDistanceMaterial>);
}
/**
* Material that only renders shadows (transparent otherwise)
*/
class ShadowMaterial extends Material {
/** Type flag for shadow material detection */
readonly isShadowMaterial: true;
/** Shadow color */
color: Color;
/**
* Create shadow material
* @param parameters - Material parameters
*/
constructor(parameters?: Partial<ShadowMaterial>);
}Usage Examples:
import {
MeshDepthMaterial,
ShadowMaterial,
RGBADepthPacking
} from 'three';
// Depth material for depth buffer visualization
const depthMaterial = new MeshDepthMaterial({
depthPacking: RGBADepthPacking
});
// Shadow catcher material
const shadowCatcher = new ShadowMaterial({
color: new Color(0x000000),
opacity: 0.5,
transparent: true
});
// Apply to ground plane to catch shadows
groundPlane.material = shadowCatcher;The material system provides comprehensive surface appearance control through physically-based rendering, artistic shading models, and custom shader support. Materials define how surfaces interact with light and determine the final rendered appearance of 3D objects.
Install with Tessl CLI
npx tessl i tessl/npm-three