Chapter 93: SpriteMaterial

Core Idea

A material for rendering instances of Sprite.

Key Concepts

• alphaMap : Texture: The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
• color : Color: Color of the material.
• fog : boolean: Whether the material is affected by fog or not.
• isSpriteMaterial : boolean (readonly): This flag can be used for type testing.
• map : Texture: The color map. May optionally include an alpha channel, typically combined with Material#transparent or [Mater…
• rotation : number: The rotation of the sprite in radians.
• sizeAttenuation : boolean: Specifies whether size of the sprite is attenuated by the camera depth (perspective camera only).
• transparent : boolean: Overwritten since sprite materials are transparent by default.

Code Examples

const map = new THREE.TextureLoader().load( 'textures/sprite.png' );
const material = new THREE.SpriteMaterial( { map: map, color: 0xffffff } );
const sprite = new THREE.Sprite( material );
sprite.scale.set(200, 200, 1)
scene.add( sprite );

• What it demonstrates: Typical usage of SpriteMaterial.

Reference Tables

Constructor

Signature
new SpriteMaterial( parameters : Object )

Properties

Property	Description
.alphaMap : Texture	The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque).
.color : Color	Color of the material.
.fog : boolean	Whether the material is affected by fog or not.
.isSpriteMaterial : boolean (readonly)	This flag can be used for type testing.
.map : Texture	The color map. May optionally include an alpha channel, typically combined with Material#transparent or Material#alphaTest. The texture map col…
.rotation : number	The rotation of the sprite in radians.
.sizeAttenuation : boolean	Specifies whether size of the sprite is attenuated by the camera depth (perspective camera only).
.transparent : boolean	Overwritten since sprite materials are transparent by default.

Key Takeaways

1. SpriteMaterial extends: EventDispatcher → Material
2. Most relevant properties: alphaMap, color, fog, isSpriteMaterial.

Connects To

• EventDispatcher: parent class
• Material: parent class
• Source: src/materials/SpriteMaterial.js