SpriteNodeMaterial
A node material for rendering sprites, which are 2D planes that always face the camera. It's ideal for creating billboards, setNames, or icons in a 3D scene. [1] It is the node-based version of SpriteMaterial.
Core Advantages
It simplifies rendering camera-facing planes. The node-based version provides powerful and performant per-instance control over position (`positionNode`), scale (`scaleNode`), and rotation (`rotationNode`) directly within the shader, making it highly efficient for rendering large numbers of sprites via instancing.
Common Uses
Creating UI elements like nameplates or health bars above characters
Rendering billboards or impostors for distant objects (e.g., trees) to save performance
Displaying 2D icons or markers in a 3D environment
Simple particle effects where each particle is an individual sprite
How to adjust
Control its appearance with `color` and `map` (texture). The `sizeAttenuation` property is key: set to `true` to make the sprite shrink with distance (perspective), or `false` to maintain a constant screen size (useful for UI). Use `rotationNode` to rotate the sprite around its center and `scaleNode` to apply additional scaling. For advanced instancing, `positionNode` can be used to define the position of each sprite instance from a buffer attribute.
Code Examples
1<sprite scale={[1, 1, 1]}>
2 {/* A sprite always faces the camera. */}
3 <spriteNodeMaterial
4 map={myTexture}
5 color="white"
6 rotationNode={timerLocal().mul(0.5)} // Example of dynamic rotation
7 />
8</sprite>