Use CSMHelper in the scene

examples/webgl_shadowmap_csm.html

@@ -21,8 +21,9 @@
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { GUI } from './jsm/libs/dat.gui.module.js';
 			import * as CSM from './jsm/csm/CSM.js';
+			import { CSMHelper } from './jsm/csm/CSMHelper.js';
 
-			var renderer, scene, camera, orthoCamera, controls, csm;
+			var renderer, scene, camera, orthoCamera, controls, csm, csmHelper;
 
 			var params = {
 				orthographic: false,
@@ -35,10 +36,10 @@
 				margin: 100,
 				lightFar: 5000,
 				lightNear: 1,
-				helper: function () {
+				autoUpdateHelper: true,
+				updateHelper: function () {
 
-					var helper = csm.helper( camera.matrix );
-					scene.add( helper );
+					csmHelper.update();
 
 				}
 			};
@@ -93,6 +94,9 @@
 					camera: camera
 				} );
 
+				csmHelper = new CSMHelper( csm );
+				scene.add( csmHelper );
+
 				var floorMaterial = new THREE.MeshPhongMaterial( { color: '#252a34' } );
 				csm.setupMaterial( floorMaterial );
 
@@ -204,8 +208,32 @@
 
 				} );
 
-				gui.add( params, 'helper' ).name( 'add frustum helper' );
+				const helperFolder = gui.addFolder( 'helper' );
+				
+				helperFolder.add( csmHelper, 'visible' );
+
+				helperFolder.add( csmHelper, 'displayFrustum' ).onChange( function () { 
+
+					csmHelper.updateVisibility();
+
+				} );
+
+				helperFolder.add( csmHelper, 'displayPlanes' ).onChange( function () { 
+
+					csmHelper.updateVisibility();
+
+				} );
+
+				helperFolder.add( csmHelper, 'displayShadowBounds' ).onChange( function () { 
+
+					csmHelper.updateVisibility();
+
+				} );
+
+				helperFolder.add( params, 'autoUpdateHelper' ).name( 'auto update' );
 
+				helperFolder.add( params, 'updateHelper' ).name( 'update' );
+				
 				window.addEventListener( 'resize', function () {
 
 					camera.aspect = window.innerWidth / window.innerHeight;
@@ -231,10 +259,20 @@
 
 					updateOrthoCamera();
 					csm.updateFrustums();
+					if ( params.autoUpdateHelper ) {
+						
+						csmHelper.update();
+					
+					}
 					renderer.render( scene, orthoCamera );
 
 				} else {
 	
+					if ( params.autoUpdateHelper ) {
+						
+						csmHelper.update();
+					
+					}
 					renderer.render( scene, camera );
 
 				}