Chapter 323: CSMHelper

Core Idea

A helper for visualizing the cascades of a CSM instance.

Key Concepts

• csm : CSM | CSMShadowNode: The CSM instance to visualize.
• displayFrustum : boolean: Whether to display the CSM frustum or not.
• displayPlanes : boolean: Whether to display the cascade planes or not.
• displayShadowBounds : boolean: Whether to display the shadow bounds or not.

Code Examples

import { CSMHelper } from 'three/addons/csm/CSMHelper.js';

• What it demonstrates: Typical usage of CSMHelper.

Reference Tables

Constructor

Signature
`new CSMHelper( csm : CSM

Properties

Property	Description
`.csm : CSM	CSMShadowNode`
.displayFrustum : boolean	Whether to display the CSM frustum or not.
.displayPlanes : boolean	Whether to display the cascade planes or not.
.displayShadowBounds : boolean	Whether to display the shadow bounds or not.

Methods

Method	Description
.dispose()	Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.
.update()	Updates the helper. This method should be called in the app's animation loop.
.updateVisibility()	This method must be called if one of the display* properties is changed at runtime.

Key Takeaways

1. CSMHelper extends: EventDispatcher → Object3D → Group
2. Most relevant properties: csm, displayFrustum, displayPlanes, displayShadowBounds.
3. Key methods: dispose, update, updateVisibility.

Connects To

• EventDispatcher: parent class
• Object3D: parent class
• Group: parent class
• Source: examples/jsm/csm/CSMHelper.js