Chapter 14: Sprite

Core Idea

A sprite is a plane that always faces towards the camera, generally with a partially transparent texture applied.

Sprites do not cast shadows, setting Object3D#castShadow to true will have no effect.

Key Concepts

• center : Vector2: The sprite's anchor point, and the point around which the sprite rotates. A value of (0.5, 0.5) corresponds to the midpoint of the sprite…
• count : number: The number of instances of this sprite. Can only be used with WebGPURenderer.
• geometry : BufferGeometry: The sprite geometry.
• isSprite : boolean (readonly): This flag can be used for type testing.
• material : SpriteMaterial | SpriteNodeMaterial: The sprite material.

Code Examples

const map = new THREE.TextureLoader().load( 'sprite.png' );
const material = new THREE.SpriteMaterial( { map: map } );
const sprite = new THREE.Sprite( material );
scene.add( sprite );

• What it demonstrates: Typical usage of Sprite.

Reference Tables

Constructor

Signature
`new Sprite( material : SpriteMaterial

Properties

Property	Description
.center : Vector2	The sprite's anchor point, and the point around which the sprite rotates. A value of (0.5, 0.5) corresponds to the midpoint of the sprite. A value of (0, 0) corresponds to the lower left corner o…
.count : number	The number of instances of this sprite. Can only be used with WebGPURenderer.
.geometry : BufferGeometry	The sprite geometry.
.isSprite : boolean (readonly)	This flag can be used for type testing.
`.material : SpriteMaterial	SpriteNodeMaterial`

Methods

Method	Description
.raycast( raycaster : Raycaster, intersects : Array.<Object> )	Computes intersection points between a casted ray and this sprite.

Key Takeaways

1. Sprite extends: EventDispatcher → Object3D
2. Most relevant properties: center, count, geometry, isSprite.
3. Key methods: raycast.

Connects To

• EventDispatcher: parent class
• Object3D: parent class
• Source: src/objects/Sprite.js