Configure sizeAttenuation in Three.js PointsMaterial

In Three.js, creating realistic particle systems often requires particles to look smaller as they move further away from the camera. This article explains how to configure the sizeAttenuation property on a PointsMaterial to enable perspective-based particle scaling, complete with quick code examples for implementation and runtime updates.

What is sizeAttenuation?

The sizeAttenuation property is a boolean option on the THREE.PointsMaterial class. It dictates whether the renderer scales the screen size of points based on their distance from the camera:

• true (Default): Particles undergo perspective scaling. Points closer to the camera appear larger, while distant points appear smaller.
• false: Particles maintain a constant size in screen pixels, regardless of how close or far they are from the camera.

Code Implementation

To enable distance-based scaling, set sizeAttenuation to true when instantiating your PointsMaterial.

import * as THREE from 'three';

// 1. Create your particle geometry
const geometry = new THREE.BufferGeometry();
// (Populate geometry vertices here...)

// 2. Create the PointsMaterial with sizeAttenuation enabled
const material = new THREE.PointsMaterial({
    color: 0x00ffcc,
    size: 0.1,                 // Base size of the particles
    sizeAttenuation: true      // Scales particles with distance
});

// 3. Create the Points object and add it to the scene
const particleSystem = new THREE.Points(geometry, material);
scene.add(particleSystem);

Changing sizeAttenuation at Runtime

If you need to toggle particle scaling dynamically after the material has already been rendered, you must update the property and instruct Three.js to recompile the material by setting needsUpdate to true.

// Disable particle scaling with distance
material.sizeAttenuation = false;
material.needsUpdate = true;

// Re-enable particle scaling with distance
material.sizeAttenuation = true;
material.needsUpdate = true;