super-three 0.141.0 → 0.147.0

package/examples/jsm/animation/CCDIKSolver.js

@@ -217,7 +217,7 @@ class CCDIKSolver {
 	 */
 	createHelper() {
 
-		return new CCDIKHelper( this.mesh, this.mesh.geometry.userData.MMD.iks );
+		return new CCDIKHelper( this.mesh, this.iks );
 
 	}
 
@@ -283,7 +283,7 @@ function setPositionOfBoneToAttributeArray( array, index, bone, matrixWorldInv )
  */
 class CCDIKHelper extends Object3D {
 
-	constructor( mesh, iks = [] ) {
+	constructor( mesh, iks = [], sphereSize = 0.25 ) {
 
 		super();
 
@@ -293,7 +293,7 @@ class CCDIKHelper extends Object3D {
 		this.matrix.copy( mesh.matrixWorld );
 		this.matrixAutoUpdate = false;
 
-		this.sphereGeometry = new SphereGeometry( 0.25, 16, 8 );
+		this.sphereGeometry = new SphereGeometry( sphereSize, 16, 8 );
 
 		this.targetSphereMaterial = new MeshBasicMaterial( {
 			color: new Color( 0xff8888 ),
@@ -393,6 +393,30 @@ class CCDIKHelper extends Object3D {
 
 	}
 
+	/**
+	 * Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.
+	 */
+	dispose() {
+
+		this.sphereGeometry.dispose();
+
+		this.targetSphereMaterial.dispose();
+		this.effectorSphereMaterial.dispose();
+		this.linkSphereMaterial.dispose();
+		this.lineMaterial.dispose();
+
+		const children = this.children;
+
+		for ( let i = 0; i < children.length; i ++ ) {
+
+			const child = children[ i ];
+
+			if ( child.isLine ) child.geometry.dispose();
+
+		}
+
+	}
+
 	// private method
 
 	_init() {

package/examples/jsm/animation/MMDPhysics.js

@@ -1,8 +1,8 @@
 import {
 	Bone,
 	BoxGeometry,
+	CapsuleGeometry,
 	Color,
-	CylinderGeometry,
 	Euler,
 	Matrix4,
 	Mesh,
@@ -209,7 +209,7 @@ class MMDPhysics {
 		// mesh's default world transform as position(0, 0, 0),
 		// quaternion(0, 0, 0, 1) and scale(0, 0, 0)
 
-		let parent = mesh.parent;
+		const parent = mesh.parent;
 
 		if ( parent !== null ) mesh.parent = null;
 
@@ -1292,6 +1292,31 @@ class MMDPhysicsHelper extends Object3D {
 
 	}
 
+
+	/**
+	 * Frees the GPU-related resources allocated by this instance. Call this method whenever this instance is no longer used in your app.
+	 */
+	dispose() {
+
+		const materials = this.materials;
+		const children = this.children;
+
+		for ( let i = 0; i < materials.length; i ++ ) {
+
+			materials[ i ].dispose();
+
+		}
+
+		for ( let i = 0; i < children.length; i ++ ) {
+
+			const child = children[ i ];
+
+			if ( child.isMesh ) child.geometry.dispose();
+
+		}
+
+	}
+
 	/**
 	 * Updates Rigid Bodies visualization.
 	 */
@@ -1358,7 +1383,7 @@ class MMDPhysicsHelper extends Object3D {
 					return new BoxGeometry( param.width * 2, param.height * 2, param.depth * 2, 8, 8, 8 );
 
 				case 2:
-					return new createCapsuleGeometry( param.width, param.height, 16, 8 );
+					return new CapsuleGeometry( param.width, param.height, 8, 16 );
 
 				default:
 					return null;
@@ -1367,25 +1392,6 @@ class MMDPhysicsHelper extends Object3D {
 
 		}
 
-		function createCapsuleGeometry( radius, cylinderHeight, segmentsRadius, segmentsHeight ) {
-
-			var geometry = new CylinderGeometry( radius, radius, cylinderHeight, segmentsRadius, segmentsHeight, true );
-			var upperSphere = new Mesh( new SphereGeometry( radius, segmentsRadius, segmentsHeight, 0, Math.PI * 2, 0, Math.PI / 2 ) );
-			var lowerSphere = new Mesh( new SphereGeometry( radius, segmentsRadius, segmentsHeight, 0, Math.PI * 2, Math.PI / 2, Math.PI / 2 ) );
-
-			upperSphere.position.set( 0, cylinderHeight / 2, 0 );
-			lowerSphere.position.set( 0, - cylinderHeight / 2, 0 );
-
-			upperSphere.updateMatrix();
-			lowerSphere.updateMatrix();
-
-			geometry.merge( upperSphere.geometry, upperSphere.matrix );
-			geometry.merge( lowerSphere.geometry, lowerSphere.matrix );
-
-			return geometry;
-
-		}
-
 		for ( var i = 0, il = bodies.length; i < il; i ++ ) {
 
 			var param = bodies[ i ].params;

package/examples/jsm/capabilities/WebGPU.js

@@ -14,7 +14,9 @@ class WebGPU {
 
 	static getErrorMessage() {
 
-		const message = 'Your browser does not support <a href="https://gpuweb.github.io/gpuweb/" style="color:blue">WebGPU</a>';
+		let message = 'Your browser does not support <a href="https://gpuweb.github.io/gpuweb/" style="color:blue">WebGPU</a>';
+
+		if ( !! window.chrome ) message += '<br>Try: <b>chrome://flags/#enable-unsafe-webgpu</b>';
 
 		const element = document.createElement( 'div' );
 		element.id = 'webgpumessage';

package/examples/jsm/controls/ArcballControls.js

@@ -1040,7 +1040,7 @@ class ArcballControls extends EventDispatcher {
 
 							}
 
-							this._v3_1.setFromMatrixPosition(this._gizmoMatrixState);
+							this._v3_1.setFromMatrixPosition( this._gizmoMatrixState );
 
 							this.applyTransformMatrix( this.scale( size, this._v3_1 ) );
 
@@ -2279,7 +2279,7 @@ class ArcballControls extends EventDispatcher {
 		this._gizmoMatrixState0.identity().setPosition( tbCenter );
 		this._gizmoMatrixState.copy( this._gizmoMatrixState0 );
 
-		if ( this.camera.zoom != 1 ) {
+		if ( this.camera.zoom !== 1 ) {
 
 			//adapt gizmos size to camera zoom
 			const size = 1 / this.camera.zoom;
@@ -2294,8 +2294,23 @@ class ArcballControls extends EventDispatcher {
 
 		this._gizmoMatrixState.decompose( this._gizmos.position, this._gizmos.quaternion, this._gizmos.scale );
 
+		//
+
+		this._gizmos.traverse( function ( object ) {
+
+			if ( object.isLine ) {
+
+				object.geometry.dispose();
+				object.material.dispose();
+
+			}
+
+		} );
+
 		this._gizmos.clear();
 
+		//
+
 		this._gizmos.add( gizmoX );
 		this._gizmos.add( gizmoY );
 		this._gizmos.add( gizmoZ );

package/examples/jsm/controls/FirstPersonControls.js

@@ -12,13 +12,6 @@ class FirstPersonControls {
 
 	constructor( object, domElement ) {
 
-		if ( domElement === undefined ) {
-
-			console.warn( 'THREE.FirstPersonControls: The second parameter "domElement" is now mandatory.' );
-			domElement = document;
-
-		}
-
 		this.object = object;
 		this.domElement = domElement;
 
@@ -49,8 +42,8 @@ class FirstPersonControls {
 
 		this.autoSpeedFactor = 0.0;
 
-		this.mouseX = 0;
-		this.mouseY = 0;
+		this.pointerX = 0;
+		this.pointerY = 0;
 
 		this.moveForward = false;
 		this.moveBackward = false;
@@ -83,7 +76,7 @@ class FirstPersonControls {
 
 		};
 
-		this.onMouseDown = function ( event ) {
+		this.onPointerDown = function ( event ) {
 
 			if ( this.domElement !== document ) {
 
@@ -106,7 +99,7 @@ class FirstPersonControls {
 
 		};
 
-		this.onMouseUp = function ( event ) {
+		this.onPointerUp = function ( event ) {
 
 			if ( this.activeLook ) {
 
@@ -123,17 +116,17 @@ class FirstPersonControls {
 
 		};
 
-		this.onMouseMove = function ( event ) {
+		this.onPointerMove = function ( event ) {
 
 			if ( this.domElement === document ) {
 
-				this.mouseX = event.pageX - this.viewHalfX;
-				this.mouseY = event.pageY - this.viewHalfY;
+				this.pointerX = event.pageX - this.viewHalfX;
+				this.pointerY = event.pageY - this.viewHalfY;
 
 			} else {
 
-				this.mouseX = event.pageX - this.domElement.offsetLeft - this.viewHalfX;
-				this.mouseY = event.pageY - this.domElement.offsetTop - this.viewHalfY;
+				this.pointerX = event.pageX - this.domElement.offsetLeft - this.viewHalfX;
+				this.pointerY = event.pageY - this.domElement.offsetTop - this.viewHalfY;
 
 			}
 
@@ -253,8 +246,8 @@ class FirstPersonControls {
 
 				}
 
-				lon -= this.mouseX * actualLookSpeed;
-				if ( this.lookVertical ) lat -= this.mouseY * actualLookSpeed * verticalLookRatio;
+				lon -= this.pointerX * actualLookSpeed;
+				if ( this.lookVertical ) lat -= this.pointerY * actualLookSpeed * verticalLookRatio;
 
 				lat = Math.max( - 85, Math.min( 85, lat ) );
 
@@ -280,25 +273,25 @@ class FirstPersonControls {
 		this.dispose = function () {
 
 			this.domElement.removeEventListener( 'contextmenu', contextmenu );
-			this.domElement.removeEventListener( 'mousedown', _onMouseDown );
-			this.domElement.removeEventListener( 'mousemove', _onMouseMove );
-			this.domElement.removeEventListener( 'mouseup', _onMouseUp );
+			this.domElement.removeEventListener( 'pointerdown', _onPointerDown );
+			this.domElement.removeEventListener( 'pointermove', _onPointerMove );
+			this.domElement.removeEventListener( 'pointerup', _onPointerUp );
 
 			window.removeEventListener( 'keydown', _onKeyDown );
 			window.removeEventListener( 'keyup', _onKeyUp );
 
 		};
 
-		const _onMouseMove = this.onMouseMove.bind( this );
-		const _onMouseDown = this.onMouseDown.bind( this );
-		const _onMouseUp = this.onMouseUp.bind( this );
+		const _onPointerMove = this.onPointerMove.bind( this );
+		const _onPointerDown = this.onPointerDown.bind( this );
+		const _onPointerUp = this.onPointerUp.bind( this );
 		const _onKeyDown = this.onKeyDown.bind( this );
 		const _onKeyUp = this.onKeyUp.bind( this );
 
 		this.domElement.addEventListener( 'contextmenu', contextmenu );
-		this.domElement.addEventListener( 'mousemove', _onMouseMove );
-		this.domElement.addEventListener( 'mousedown', _onMouseDown );
-		this.domElement.addEventListener( 'mouseup', _onMouseUp );
+		this.domElement.addEventListener( 'pointerdown', _onPointerDown );
+		this.domElement.addEventListener( 'pointermove', _onPointerMove );
+		this.domElement.addEventListener( 'pointerup', _onPointerUp );
 
 		window.addEventListener( 'keydown', _onKeyDown );
 		window.addEventListener( 'keyup', _onKeyUp );

package/examples/jsm/controls/FlyControls.js

@@ -12,13 +12,6 @@ class FlyControls extends EventDispatcher {
 
 		super();
 
-		if ( domElement === undefined ) {
-
-			console.warn( 'THREE.FlyControls: The second parameter "domElement" is now mandatory.' );
-			domElement = document;
-
-		}
-
 		this.object = object;
 		this.domElement = domElement;
 
@@ -43,7 +36,7 @@ class FlyControls extends EventDispatcher {
 
 		this.tmpQuaternion = new Quaternion();
 
-		this.mouseStatus = 0;
+		this.status = 0;
 
 		this.moveState = { up: 0, down: 0, left: 0, right: 0, forward: 0, back: 0, pitchUp: 0, pitchDown: 0, yawLeft: 0, yawRight: 0, rollLeft: 0, rollRight: 0 };
 		this.moveVector = new Vector3( 0, 0, 0 );
@@ -119,11 +112,11 @@ class FlyControls extends EventDispatcher {
 
 		};
 
-		this.mousedown = function ( event ) {
+		this.pointerdown = function ( event ) {
 
 			if ( this.dragToLook ) {
 
-				this.mouseStatus ++;
+				this.status ++;
 
 			} else {
 
@@ -140,9 +133,9 @@ class FlyControls extends EventDispatcher {
 
 		};
 
-		this.mousemove = function ( event ) {
+		this.pointermove = function ( event ) {
 
-			if ( ! this.dragToLook || this.mouseStatus > 0 ) {
+			if ( ! this.dragToLook || this.status > 0 ) {
 
 				const container = this.getContainerDimensions();
 				const halfWidth = container.size[ 0 ] / 2;
@@ -157,11 +150,11 @@ class FlyControls extends EventDispatcher {
 
 		};
 
-		this.mouseup = function ( event ) {
+		this.pointerup = function ( event ) {
 
 			if ( this.dragToLook ) {
 
-				this.mouseStatus --;
+				this.status --;
 
 				this.moveState.yawLeft = this.moveState.pitchDown = 0;
 
@@ -252,26 +245,25 @@ class FlyControls extends EventDispatcher {
 		this.dispose = function () {
 
 			this.domElement.removeEventListener( 'contextmenu', contextmenu );
-			this.domElement.removeEventListener( 'mousedown', _mousedown );
-			this.domElement.removeEventListener( 'mousemove', _mousemove );
-			this.domElement.removeEventListener( 'mouseup', _mouseup );
+			this.domElement.removeEventListener( 'pointerdown', _pointerdown );
+			this.domElement.removeEventListener( 'pointermove', _pointermove );
+			this.domElement.removeEventListener( 'pointerup', _pointerup );
 
 			window.removeEventListener( 'keydown', _keydown );
 			window.removeEventListener( 'keyup', _keyup );
 
 		};
 
-		const _mousemove = this.mousemove.bind( this );
-		const _mousedown = this.mousedown.bind( this );
-		const _mouseup = this.mouseup.bind( this );
+		const _pointermove = this.pointermove.bind( this );
+		const _pointerdown = this.pointerdown.bind( this );
+		const _pointerup = this.pointerup.bind( this );
 		const _keydown = this.keydown.bind( this );
 		const _keyup = this.keyup.bind( this );
 
 		this.domElement.addEventListener( 'contextmenu', contextmenu );
-
-		this.domElement.addEventListener( 'mousemove', _mousemove );
-		this.domElement.addEventListener( 'mousedown', _mousedown );
-		this.domElement.addEventListener( 'mouseup', _mouseup );
+		this.domElement.addEventListener( 'pointerdown', _pointerdown );
+		this.domElement.addEventListener( 'pointermove', _pointermove );
+		this.domElement.addEventListener( 'pointerup', _pointerup );
 
 		window.addEventListener( 'keydown', _keydown );
 		window.addEventListener( 'keyup', _keyup );

package/examples/jsm/controls/OrbitControls.js

@@ -25,9 +25,6 @@ class OrbitControls extends EventDispatcher {
 
 		super();
 
-		if ( domElement === undefined ) console.warn( 'THREE.OrbitControls: The second parameter "domElement" is now mandatory.' );
-		if ( domElement === document ) console.error( 'THREE.OrbitControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
-
 		this.object = object;
 		this.domElement = domElement;
 		this.domElement.style.touchAction = 'none'; // disable touch scroll
@@ -604,22 +601,62 @@ class OrbitControls extends EventDispatcher {
 			switch ( event.code ) {
 
 				case scope.keys.UP:
-					pan( 0, scope.keyPanSpeed );
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateUp( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( 0, scope.keyPanSpeed );
+
+					}
+
 					needsUpdate = true;
 					break;
 
 				case scope.keys.BOTTOM:
-					pan( 0, - scope.keyPanSpeed );
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateUp( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( 0, - scope.keyPanSpeed );
+
+					}
+
 					needsUpdate = true;
 					break;
 
 				case scope.keys.LEFT:
-					pan( scope.keyPanSpeed, 0 );
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateLeft( 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( scope.keyPanSpeed, 0 );
+
+					}
+
 					needsUpdate = true;
 					break;
 
 				case scope.keys.RIGHT:
-					pan( - scope.keyPanSpeed, 0 );
+
+					if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
+
+						rotateLeft( - 2 * Math.PI * scope.rotateSpeed / scope.domElement.clientHeight );
+
+					} else {
+
+						pan( - scope.keyPanSpeed, 0 );
+
+					}
+
 					needsUpdate = true;
 					break;
 
@@ -960,8 +997,6 @@ class OrbitControls extends EventDispatcher {
 
 		function onMouseMove( event ) {
 
-			if ( scope.enabled === false ) return;
-
 			switch ( state ) {
 
 				case STATE.ROTATE:

package/examples/jsm/controls/PointerLockControls.js

@@ -19,13 +19,6 @@ class PointerLockControls extends EventDispatcher {
 
 		super();
 
-		if ( domElement === undefined ) {
-
-			console.warn( 'THREE.PointerLockControls: The second parameter "domElement" is now mandatory.' );
-			domElement = document.body;
-
-		}
-
 		this.domElement = domElement;
 		this.isLocked = false;
 

package/examples/jsm/controls/TrackballControls.js

@@ -16,9 +16,6 @@ class TrackballControls extends EventDispatcher {
 
 		super();
 
-		if ( domElement === undefined ) console.warn( 'THREE.TrackballControls: The second parameter "domElement" is now mandatory.' );
-		if ( domElement === document ) console.error( 'THREE.TrackballControls: "document" should not be used as the target "domElement". Please use "renderer.domElement" instead.' );
-
 		const scope = this;
 		const STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
 
@@ -703,8 +700,20 @@ class TrackballControls extends EventDispatcher {
 
 				case 2:
 					_state = STATE.TOUCH_ZOOM_PAN;
-					_moveCurr.copy( getMouseOnCircle( event.pageX - _movePrev.x, event.pageY - _movePrev.y ) );
-					_movePrev.copy( _moveCurr );
+
+					for ( let i = 0; i < _pointers.length; i ++ ) {
+
+						if ( _pointers[ i ].pointerId !== event.pointerId ) {
+
+							const position = _pointerPositions[ _pointers[ i ].pointerId ];
+							_moveCurr.copy( getMouseOnCircle( position.x, position.y ) );
+							_movePrev.copy( _moveCurr );
+							break;
+
+						}
+
+					}
+
 					break;
 
 			}

package/examples/jsm/controls/TransformControls.js

@@ -205,7 +205,15 @@ class TransformControls extends Object3D {
 		this.camera.updateMatrixWorld();
 		this.camera.matrixWorld.decompose( this.cameraPosition, this.cameraQuaternion, this._cameraScale );
 
-		this.eye.copy( this.cameraPosition ).sub( this.worldPosition ).normalize();
+		if ( this.camera.isOrthographicCamera ) {
+
+			this.camera.getWorldDirection( this.eye ).negate();
+
+		} else {
+
+			this.eye.copy( this.cameraPosition ).sub( this.worldPosition ).normalize();
+
+		}
 
 		super.updateMatrixWorld( this );
 
@@ -555,7 +563,7 @@ class TransformControls extends Object3D {
 
 	}
 
-	// Detatch from object
+	// Detach from object
 	detach() {
 
 		this.object = undefined;
@@ -635,12 +643,6 @@ class TransformControls extends Object3D {
 
 	}
 
-	update() {
-
-		console.warn( 'THREE.TransformControls: update function has no more functionality and therefore has been deprecated.' );
-
-	}
-
 }
 
 // mouse / touch event handlers
@@ -1308,12 +1310,12 @@ class TransformControlsGizmo extends Object3D {
 
 				// Hide translate and scale axis facing the camera
 
-				const AXIS_HIDE_TRESHOLD = 0.99;
-				const PLANE_HIDE_TRESHOLD = 0.2;
+				const AXIS_HIDE_THRESHOLD = 0.99;
+				const PLANE_HIDE_THRESHOLD = 0.2;
 
 				if ( handle.name === 'X' ) {
 
-					if ( Math.abs( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) {
+					if ( Math.abs( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_THRESHOLD ) {
 
 						handle.scale.set( 1e-10, 1e-10, 1e-10 );
 						handle.visible = false;
@@ -1324,7 +1326,7 @@ class TransformControlsGizmo extends Object3D {
 
 				if ( handle.name === 'Y' ) {
 
-					if ( Math.abs( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) {
+					if ( Math.abs( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_THRESHOLD ) {
 
 						handle.scale.set( 1e-10, 1e-10, 1e-10 );
 						handle.visible = false;
@@ -1335,7 +1337,7 @@ class TransformControlsGizmo extends Object3D {
 
 				if ( handle.name === 'Z' ) {
 
-					if ( Math.abs( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_TRESHOLD ) {
+					if ( Math.abs( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) ) > AXIS_HIDE_THRESHOLD ) {
 
 						handle.scale.set( 1e-10, 1e-10, 1e-10 );
 						handle.visible = false;
@@ -1346,7 +1348,7 @@ class TransformControlsGizmo extends Object3D {
 
 				if ( handle.name === 'XY' ) {
 
-					if ( Math.abs( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_TRESHOLD ) {
+					if ( Math.abs( _alignVector.copy( _unitZ ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_THRESHOLD ) {
 
 						handle.scale.set( 1e-10, 1e-10, 1e-10 );
 						handle.visible = false;
@@ -1357,7 +1359,7 @@ class TransformControlsGizmo extends Object3D {
 
 				if ( handle.name === 'YZ' ) {
 
-					if ( Math.abs( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_TRESHOLD ) {
+					if ( Math.abs( _alignVector.copy( _unitX ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_THRESHOLD ) {
 
 						handle.scale.set( 1e-10, 1e-10, 1e-10 );
 						handle.visible = false;
@@ -1368,7 +1370,7 @@ class TransformControlsGizmo extends Object3D {
 
 				if ( handle.name === 'XZ' ) {
 
-					if ( Math.abs( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_TRESHOLD ) {
+					if ( Math.abs( _alignVector.copy( _unitY ).applyQuaternion( quaternion ).dot( this.eye ) ) < PLANE_HIDE_THRESHOLD ) {
 
 						handle.scale.set( 1e-10, 1e-10, 1e-10 );
 						handle.visible = false;

package/examples/jsm/csm/CSM.js

@@ -343,6 +343,7 @@ export class CSM {
 
 		for ( let i = 0; i < this.lights.length; i ++ ) {
 
+			this.parent.remove( this.lights[ i ].target );
 			this.parent.remove( this.lights[ i ] );
 
 		}

package/examples/jsm/csm/CSMHelper.js

@@ -158,6 +158,36 @@ class CSMHelper extends Group {
 
 	}
 
+	dispose() {
+
+		const frustumLines = this.frustumLines;
+		const cascadeLines = this.cascadeLines;
+		const cascadePlanes = this.cascadePlanes;
+		const shadowLines = this.shadowLines;
+
+		frustumLines.geometry.dispose();
+		frustumLines.material.dispose();
+
+		const cascades = this.csm.cascades;
+
+		for ( let i = 0; i < cascades; i ++ ) {
+
+			const cascadeLine = cascadeLines[ i ];
+			const cascadePlane = cascadePlanes[ i ];
+			const shadowLineGroup = shadowLines[ i ];
+			const shadowLine = shadowLineGroup.children[ 0 ];
+
+			cascadeLine.dispose(); // Box3Helper
+
+			cascadePlane.geometry.dispose();
+			cascadePlane.material.dispose();
+
+			shadowLine.dispose(); // Box3Helper
+
+		}
+
+	}
+
 }
 
 export { CSMHelper };