@plastic-software/three 0.175.14 → 0.179.0

package/examples/jsm/Addons.js

@@ -28,7 +28,6 @@ export * from './effects/AnaglyphEffect.js';
 export * from './effects/AsciiEffect.js';
 export * from './effects/OutlineEffect.js';
 export * from './effects/ParallaxBarrierEffect.js';
-export * from './effects/PeppersGhostEffect.js';
 export * from './effects/StereoEffect.js';
 
 export * from './environments/DebugEnvironment.js';
@@ -118,7 +117,7 @@ export * from './loaders/TDSLoader.js';
 export * from './loaders/TGALoader.js';
 export * from './loaders/TIFFLoader.js';
 export * from './loaders/TTFLoader.js';
-export * from './loaders/USDZLoader.js';
+export * from './loaders/USDLoader.js';
 export * from './loaders/VOXLoader.js';
 export * from './loaders/VRMLLoader.js';
 export * from './loaders/VTKLoader.js';
@@ -147,7 +146,6 @@ export * from './misc/MorphAnimMesh.js';
 export * from './misc/MorphBlendMesh.js';
 export * from './misc/ProgressiveLightMap.js';
 export * from './misc/RollerCoaster.js';
-export * from './misc/Timer.js';
 export * from './misc/TubePainter.js';
 export * from './misc/Volume.js';
 export * from './misc/VolumeSlice.js';

package/examples/jsm/animation/AnimationClipCreator.js

@@ -11,6 +11,7 @@ import {
  * A utility class with factory methods for creating basic animation clips.
  *
  * @hideconstructor
+ * @three_import import { AnimationClipCreator } from 'three/addons/animation/AnimationClipCreator.js';
  */
 class AnimationClipCreator {
 

package/examples/jsm/animation/CCDIKSolver.js

@@ -13,7 +13,7 @@ import {
 	Vector3
 } from 'three';
 
-const _q = new Quaternion();
+const _quaternion = new Quaternion();
 const _targetPos = new Vector3();
 const _targetVec = new Vector3();
 const _effectorPos = new Vector3();
@@ -29,6 +29,8 @@ const _matrix = new Matrix4();
  * This class solves the Inverse Kinematics Problem with a [CCD Algorithm]{@link https://web.archive.org/web/20221206080850/https://sites.google.com/site/auraliusproject/ccd-algorithm}.
  *
  * `CCDIKSolver` is designed to work with instances of {@link SkinnedMesh}.
+ *
+ * @three_import import { CCDIKSolver } from 'three/addons/animation/CCDIKSolver.js';
  */
 class CCDIKSolver {
 
@@ -192,8 +194,8 @@ class CCDIKSolver {
 				_axis.crossVectors( _effectorVec, _targetVec );
 				_axis.normalize();
 
-				_q.setFromAxisAngle( _axis, angle );
-				link.quaternion.multiply( _q );
+				_quaternion.setFromAxisAngle( _axis, angle );
+				link.quaternion.multiply( _quaternion );
 
 				// TODO: re-consider the limitation specification
 				if ( limitation !== undefined ) {
@@ -322,6 +324,7 @@ function setPositionOfBoneToAttributeArray( array, index, bone, matrixWorldInv )
  * Helper for visualizing IK bones.
  *
  * @augments Object3D
+ * @three_import import { CCDIKHelper } from 'three/addons/animation/CCDIKSolver.js';
  */
 class CCDIKHelper extends Object3D {
 

package/examples/jsm/capabilities/WebGL.js

@@ -2,6 +2,7 @@
  * A utility module with basic WebGL 2 capability testing.
  *
  * @hideconstructor
+ * @three_import import WebGL from 'three/addons/capabilities/WebGL.js';
  */
 class WebGL {
 
@@ -107,33 +108,6 @@ class WebGL {
 
 	}
 
-	// @deprecated, r168
-
-	static isWebGLAvailable() {
-
-		console.warn( 'isWebGLAvailable() has been deprecated and will be removed in r178. Use isWebGL2Available() instead.' );
-
-		try {
-
-			const canvas = document.createElement( 'canvas' );
-			return !! ( window.WebGLRenderingContext && ( canvas.getContext( 'webgl' ) || canvas.getContext( 'experimental-webgl' ) ) );
-
-		} catch ( e ) {
-
-			return false;
-
-		}
-
-	}
-
-	static getWebGLErrorMessage() {
-
-		console.warn( 'getWebGLErrorMessage() has been deprecated and will be removed in r178. Use getWebGL2ErrorMessage() instead.' );
-
-		return this._getErrorMessage( 1 );
-
-	}
-
 }
 
 export default WebGL;

package/examples/jsm/capabilities/WebGPU.js

@@ -2,7 +2,7 @@ let isAvailable = ( typeof navigator !== 'undefined' && navigator.gpu !== undefi
 
 if ( typeof window !== 'undefined' && isAvailable ) {
 
-	isAvailable = await navigator.gpu.requestAdapter();
+	isAvailable = Boolean( await navigator.gpu.requestAdapter() );
 
 }
 
@@ -10,6 +10,7 @@ if ( typeof window !== 'undefined' && isAvailable ) {
  * A utility module with basic WebGPU capability testing.
  *
  * @hideconstructor
+ * @three_import import WebGPU from 'three/addons/capabilities/WebGPU.js';
  */
 class WebGPU {
 

package/examples/jsm/controls/ArcballControls.js

@@ -96,7 +96,7 @@ const _EPS = 0.000001;
  * Arcball controls allow the camera to be controlled by a virtual trackball with full touch support and advanced navigation functionality.
  * Cursor/finger positions and movements are mapped over a virtual trackball surface represented by a gizmo and mapped in intuitive and
  * consistent camera movements. Dragging cursor/fingers will cause camera to orbit around the center of the trackball in a conservative
- * way (returning to the starting point will make the camera to return to its starting orientation).
+ * way (returning to the starting point will make the camera return to its starting orientation).
  *
  * In addition to supporting pan, zoom and pinch gestures, Arcball controls provide focus< functionality with a double click/tap for intuitively
  * moving the object's point of interest in the center of the virtual trackball. Focus allows a much better inspection and navigation in complex
@@ -107,6 +107,7 @@ const _EPS = 0.000001;
  * animation loop when animations are on.
  *
  * @augments Controls
+ * @three_import import { ArcballControls } from 'three/addons/controls/ArcballControls.js';
  */
 class ArcballControls extends Controls {
 
@@ -195,6 +196,7 @@ class ArcballControls extends Controls {
 		this._farPos0 = 0;
 		this._cameraMatrixState0 = new Matrix4();
 		this._gizmoMatrixState0 = new Matrix4();
+		this._target0 = new Vector3();
 
 		//pointers array
 		this._button = - 1;
@@ -455,7 +457,7 @@ class ArcballControls extends Controls {
 		this._devPxRatio = window.devicePixelRatio;
 
 		this.domElement.addEventListener( 'contextmenu', this._onContextMenu );
-		this.domElement.addEventListener( 'wheel', this._onWheel );
+		this.domElement.addEventListener( 'wheel', this._onWheel, { passive: false } );
 		this.domElement.addEventListener( 'pointerdown', this._onPointerDown );
 		this.domElement.addEventListener( 'pointercancel', this._onPointerCancel );
 
@@ -2228,6 +2230,7 @@ class ArcballControls extends Controls {
 	 */
 	reset() {
 
+		this.target.copy( this._target0 );
 		this.object.zoom = this._zoom0;
 
 		if ( this.object.isPerspectiveCamera ) {
@@ -2300,7 +2303,8 @@ class ArcballControls extends Controls {
 					cameraNear: this.object.near,
 					cameraUp: this.object.up,
 					cameraZoom: this.object.zoom,
-					gizmoMatrix: this._gizmos.matrix
+					gizmoMatrix: this._gizmos.matrix,
+					target: this.target
 
 				}
 			} );
@@ -2315,7 +2319,8 @@ class ArcballControls extends Controls {
 					cameraNear: this.object.near,
 					cameraUp: this.object.up,
 					cameraZoom: this.object.zoom,
-					gizmoMatrix: this._gizmos.matrix
+					gizmoMatrix: this._gizmos.matrix,
+					target: this.target
 
 				}
 			} );
@@ -2346,6 +2351,10 @@ class ArcballControls extends Controls {
 	 */
 	saveState() {
 
+		this.object.updateMatrix();
+		this._gizmos.updateMatrix();
+
+		this._target0.copy( this.target );
 		this._cameraMatrixState0.copy( this.object.matrix );
 		this._gizmoMatrixState0.copy( this._gizmos.matrix );
 		this._nearPos = this.object.near;
@@ -2946,6 +2955,8 @@ class ArcballControls extends Controls {
 
 		if ( state.arcballState != undefined ) {
 
+			this.target.fromArray( state.arcballState.target );
+
 			this._cameraMatrixState.fromArray( state.arcballState.cameraMatrix.elements );
 			this._cameraMatrixState.decompose( this.object.position, this.object.quaternion, this.object.scale );
 

package/examples/jsm/controls/DragControls.js

@@ -52,6 +52,7 @@ const STATE = {
  * ```
  *
  * @augments Controls
+ * @three_import import { DragControls } from 'three/addons/controls/DragControls.js';
  */
 class DragControls extends Controls {
 

package/examples/jsm/controls/FirstPersonControls.js

@@ -14,6 +14,7 @@ const _targetPosition = new Vector3();
  * This class is an alternative implementation of {@link FlyControls}.
  *
  * @augments Controls
+ * @three_import import { FirstPersonControls } from 'three/addons/controls/FirstPersonControls.js';
  */
 class FirstPersonControls extends Controls {
 

package/examples/jsm/controls/FlyControls.js

@@ -21,6 +21,7 @@ const _tmpQuaternion = new Quaternion();
  * (e.g. focus on a specific target).
  *
  * @augments Controls
+ * @three_import import { FlyControls } from 'three/addons/controls/FlyControls.js';
  */
 class FlyControls extends Controls {
 

package/examples/jsm/controls/MapControls.js

@@ -12,6 +12,7 @@ import { OrbitControls } from './OrbitControls.js';
  * - Pan: Left mouse, or arrow keys / touch: one-finger move.
  *
  * @augments OrbitControls
+ * @three_import import { MapControls } from 'three/addons/controls/MapControls.js';
  */
 class MapControls extends OrbitControls {
 

package/examples/jsm/controls/OrbitControls.js

@@ -83,6 +83,7 @@ const _EPS = 0.000001;
  * ```
  *
  * @augments Controls
+ * @three_import import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
  */
 class OrbitControls extends Controls {
 

package/examples/jsm/controls/PointerLockControls.js

@@ -31,6 +31,7 @@ const _lockEvent = { type: 'lock' };
  */
 const _unlockEvent = { type: 'unlock' };
 
+const _MOUSE_SENSITIVITY = 0.002;
 const _PI_2 = Math.PI / 2;
 
 /**
@@ -55,6 +56,7 @@ const _PI_2 = Math.PI / 2;
  * ```
  *
  * @augments Controls
+ * @three_import import { PointerLockControls } from 'three/addons/controls/PointerLockControls.js';
  */
 class PointerLockControls extends Controls {
 
@@ -200,7 +202,7 @@ class PointerLockControls extends Controls {
 
 	/**
 	 * Activates the pointer lock.
-	 * 
+	 *
 	 * @param {boolean} [unadjustedMovement=false] - Disables OS-level adjustment for mouse acceleration, and accesses raw mouse input instead.
 	 * Setting it to true will disable mouse acceleration.
 	 */
@@ -232,8 +234,8 @@ function onMouseMove( event ) {
 	const camera = this.object;
 	_euler.setFromQuaternion( camera.quaternion );
 
-	_euler.y -= event.movementX * 0.002 * this.pointerSpeed;
-	_euler.x -= event.movementY * 0.002 * this.pointerSpeed;
+	_euler.y -= event.movementX * _MOUSE_SENSITIVITY * this.pointerSpeed;
+	_euler.x -= event.movementY * _MOUSE_SENSITIVITY * this.pointerSpeed;
 
 	_euler.x = Math.max( _PI_2 - this.maxPolarAngle, Math.min( _PI_2 - this.minPolarAngle, _euler.x ) );
 

package/examples/jsm/controls/TrackballControls.js

@@ -51,6 +51,7 @@ const _moveDirection = new Vector3();
  * to stay "right side up".
  *
  * @augments Controls
+ * @three_import import { TrackballControls } from 'three/addons/controls/TrackballControls.js';
  */
 class TrackballControls extends Controls {
 

package/examples/jsm/controls/TransformControls.js

@@ -72,6 +72,7 @@ const _objectChangeEvent = { type: 'objectChange' };
  * `TransformControls` expects that its attached 3D object is part of the scene graph.
  *
  * @augments Controls
+ * @three_import import { TransformControls } from 'three/addons/controls/TransformControls.js';
  */
 class TransformControls extends Controls {
 
@@ -887,6 +888,40 @@ class TransformControls extends Controls {
 
 	}
 
+	/**
+	 * Sets the colors of the control's gizmo.
+	 *
+	 * @param {number|Color|string} xAxis - The x-axis color.
+	 * @param {number|Color|string} yAxis - The y-axis color.
+	 * @param {number|Color|string} zAxis - The z-axis color.
+	 * @param {number|Color|string} active - The color for active elements.
+	 */
+	setColors( xAxis, yAxis, zAxis, active ) {
+
+		const materialLib = this._gizmo.materialLib;
+
+		materialLib.xAxis.color.set( xAxis );
+		materialLib.yAxis.color.set( yAxis );
+		materialLib.zAxis.color.set( zAxis );
+		materialLib.active.color.set( active );
+		materialLib.xAxisTransparent.color.set( xAxis );
+		materialLib.yAxisTransparent.color.set( yAxis );
+		materialLib.zAxisTransparent.color.set( zAxis );
+		materialLib.activeTransparent.color.set( active );
+
+		// update color caches
+
+		if ( materialLib.xAxis._color ) materialLib.xAxis._color.set( xAxis );
+		if ( materialLib.yAxis._color ) materialLib.yAxis._color.set( yAxis );
+		if ( materialLib.zAxis._color ) materialLib.zAxis._color.set( zAxis );
+		if ( materialLib.active._color ) materialLib.active._color.set( active );
+		if ( materialLib.xAxisTransparent._color ) materialLib.xAxisTransparent._color.set( xAxis );
+		if ( materialLib.yAxisTransparent._color ) materialLib.yAxisTransparent._color.set( yAxis );
+		if ( materialLib.zAxisTransparent._color ) materialLib.zAxisTransparent._color.set( zAxis );
+		if ( materialLib.activeTransparent._color ) materialLib.activeTransparent._color.set( active );
+
+	}
+
 }
 
 // mouse / touch event handlers
@@ -1145,6 +1180,19 @@ class TransformControlsGizmo extends Object3D {
 		const matGray = gizmoMaterial.clone();
 		matGray.color.setHex( 0x787878 );
 
+		// materials in the below property are configurable via setColors()
+
+		this.materialLib = {
+			xAxis: matRed,
+			yAxis: matGreen,
+			zAxis: matBlue,
+			active: matYellow,
+			xAxisTransparent: matRedTransparent,
+			yAxisTransparent: matGreenTransparent,
+			zAxisTransparent: matBlueTransparent,
+			activeTransparent: matYellowTransparent
+		};
+
 		// reusable geometry
 
 		const arrowGeometry = new CylinderGeometry( 0, 0.04, 0.1, 12 );
@@ -1199,16 +1247,16 @@ class TransformControlsGizmo extends Object3D {
 				[ new Mesh( lineGeometry2, matBlue ), null, [ Math.PI / 2, 0, 0 ]]
 			],
 			XYZ: [
-				[ new Mesh( new OctahedronGeometry( 0.1, 0 ), matWhiteTransparent.clone() ), [ 0, 0, 0 ]]
+				[ new Mesh( new OctahedronGeometry( 0.1, 0 ), matWhiteTransparent ), [ 0, 0, 0 ]]
 			],
 			XY: [
-				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matBlueTransparent.clone() ), [ 0.15, 0.15, 0 ]]
+				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matBlueTransparent ), [ 0.15, 0.15, 0 ]]
 			],
 			YZ: [
-				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matRedTransparent.clone() ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]
+				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matRedTransparent ), [ 0, 0.15, 0.15 ], [ 0, Math.PI / 2, 0 ]]
 			],
 			XZ: [
-				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matGreenTransparent.clone() ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]
+				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matGreenTransparent ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]
 			]
 		};
 
@@ -1250,13 +1298,13 @@ class TransformControlsGizmo extends Object3D {
 				[ new Line( TranslateHelperGeometry(), matHelper ), null, null, null, 'helper' ]
 			],
 			X: [
-				[ new Line( lineGeometry, matHelper.clone() ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]
+				[ new Line( lineGeometry, matHelper ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]
 			],
 			Y: [
-				[ new Line( lineGeometry, matHelper.clone() ), [ 0, - 1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], 'helper' ]
+				[ new Line( lineGeometry, matHelper ), [ 0, - 1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], 'helper' ]
 			],
 			Z: [
-				[ new Line( lineGeometry, matHelper.clone() ), [ 0, 0, - 1e3 ], [ 0, - Math.PI / 2, 0 ], [ 1e6, 1, 1 ], 'helper' ]
+				[ new Line( lineGeometry, matHelper ), [ 0, 0, - 1e3 ], [ 0, - Math.PI / 2, 0 ], [ 1e6, 1, 1 ], 'helper' ]
 			]
 		};
 
@@ -1280,7 +1328,7 @@ class TransformControlsGizmo extends Object3D {
 
 		const helperRotate = {
 			AXIS: [
-				[ new Line( lineGeometry, matHelper.clone() ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]
+				[ new Line( lineGeometry, matHelper ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]
 			]
 		};
 
@@ -1328,7 +1376,7 @@ class TransformControlsGizmo extends Object3D {
 				[ new Mesh( new BoxGeometry( 0.15, 0.15, 0.01 ), matGreenTransparent ), [ 0.15, 0, 0.15 ], [ - Math.PI / 2, 0, 0 ]]
 			],
 			XYZ: [
-				[ new Mesh( new BoxGeometry( 0.1, 0.1, 0.1 ), matWhiteTransparent.clone() ) ],
+				[ new Mesh( new BoxGeometry( 0.1, 0.1, 0.1 ), matWhiteTransparent ) ],
 			]
 		};
 
@@ -1361,13 +1409,13 @@ class TransformControlsGizmo extends Object3D {
 
 		const helperScale = {
 			X: [
-				[ new Line( lineGeometry, matHelper.clone() ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]
+				[ new Line( lineGeometry, matHelper ), [ - 1e3, 0, 0 ], null, [ 1e6, 1, 1 ], 'helper' ]
 			],
 			Y: [
-				[ new Line( lineGeometry, matHelper.clone() ), [ 0, - 1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], 'helper' ]
+				[ new Line( lineGeometry, matHelper ), [ 0, - 1e3, 0 ], [ 0, 0, Math.PI / 2 ], [ 1e6, 1, 1 ], 'helper' ]
 			],
 			Z: [
-				[ new Line( lineGeometry, matHelper.clone() ), [ 0, 0, - 1e3 ], [ 0, - Math.PI / 2, 0 ], [ 1e6, 1, 1 ], 'helper' ]
+				[ new Line( lineGeometry, matHelper ), [ 0, 0, - 1e3 ], [ 0, - Math.PI / 2, 0 ], [ 1e6, 1, 1 ], 'helper' ]
 			]
 		};
 
@@ -1748,7 +1796,7 @@ class TransformControlsGizmo extends Object3D {
 
 				if ( handle.name === this.axis ) {
 
-					handle.material.color.setHex( 0xffff00 );
+					handle.material.color.copy( this.materialLib.active.color );
 					handle.material.opacity = 1.0;
 
 				} else if ( this.axis.split( '' ).some( function ( a ) {
@@ -1757,7 +1805,7 @@ class TransformControlsGizmo extends Object3D {
 
 				} ) ) {
 
-					handle.material.color.setHex( 0xffff00 );
+					handle.material.color.copy( this.materialLib.active.color );
 					handle.material.opacity = 1.0;
 
 				}

package/examples/jsm/csm/CSM.js

@@ -25,6 +25,8 @@ const _up = new Vector3( 0, 1, 0 );
  *
  * This module can only be used with {@link WebGLRenderer}. When using {@link WebGPURenderer},
  * use {@link CSMShadowNode} instead.
+ *
+ * @three_import import { CSM } from 'three/addons/csm/CSM.js';
  */
 export class CSM {
 

package/examples/jsm/csm/CSMFrustum.js

@@ -4,6 +4,8 @@ const inverseProjectionMatrix = new Matrix4();
 
 /**
  * Represents the frustum of a CSM instance.
+ *
+ * @three_import import { CSMFrustum } from 'three/addons/csm/CSMFrustum.js';
  */
 class CSMFrustum {
 

package/examples/jsm/csm/CSMHelper.js

@@ -16,6 +16,7 @@ import {
  * A helper for visualizing the cascades of a CSM instance.
  *
  * @augments Group
+ * @three_import import { CSMHelper } from 'three/addons/csm/CSMHelper.js';
  */
 class CSMHelper extends Group {
 

package/examples/jsm/csm/CSMShader.js

@@ -1,6 +1,9 @@
 import { ShaderChunk } from 'three';
 
-/** @module CSMShader */
+/**
+ * @module CSMShader
+ * @three_import import { CSMShader } from 'three/addons/csm/CSMShader.js';
+ */
 
 /**
  * The object that holds the GLSL enhancements to enable CSM. This

package/examples/jsm/csm/CSMShadowNode.js

@@ -42,6 +42,7 @@ class LwLight extends Object3D {
  * use {@link CSM} instead.
  *
  * @augments ShadowBaseNode
+ * @three_import import { CSMShadowNode } from 'three/addons/csm/CSMShadowNode.js';
  */
 class CSMShadowNode extends ShadowBaseNode {
 
@@ -162,7 +163,6 @@ class CSMShadowNode extends ShadowBaseNode {
 		this.mainFrustum = new CSMFrustum( data );
 
 		const light = this.light;
-		const parent = light.parent;
 
 		for ( let i = 0; i < this.cascades; i ++ ) {
 
@@ -174,9 +174,6 @@ class CSMShadowNode extends ShadowBaseNode {
 
 			this.lights.push( lwLight );
 
-			parent.add( lwLight );
-			parent.add( lwLight.target );
-
 			lwLight.shadow = lShadow;
 
 			this._shadowNodes.push( shadow( lwLight, lShadow ) );
@@ -377,9 +374,9 @@ class CSMShadowNode extends ShadowBaseNode {
 	_setupFade() {
 
 		const cameraNear = reference( 'camera.near', 'float', this ).setGroup( renderGroup );
-		const cascades = reference( '_cascades', 'vec2', this ).setGroup( renderGroup ).label( 'cascades' );
+		const cascades = reference( '_cascades', 'vec2', this ).setGroup( renderGroup ).setName( 'cascades' );
 
-		const shadowFar = uniform( 'float' ).setGroup( renderGroup ).label( 'shadowFar' )
+		const shadowFar = uniform( 'float' ).setGroup( renderGroup ).setName( 'shadowFar' )
 			.onRenderUpdate( () => Math.min( this.maxFar, this.camera.far ) );
 
 		const linearDepth = viewZToOrthographicDepth( positionView.z, cameraNear, shadowFar ).toVar( 'linearDepth' );
@@ -459,9 +456,9 @@ class CSMShadowNode extends ShadowBaseNode {
 	_setupStandard() {
 
 		const cameraNear = reference( 'camera.near', 'float', this ).setGroup( renderGroup );
-		const cascades = reference( '_cascades', 'vec2', this ).setGroup( renderGroup ).label( 'cascades' );
+		const cascades = reference( '_cascades', 'vec2', this ).setGroup( renderGroup ).setName( 'cascades' );
 
-		const shadowFar = uniform( 'float' ).setGroup( renderGroup ).label( 'shadowFar' )
+		const shadowFar = uniform( 'float' ).setGroup( renderGroup ).setName( 'shadowFar' )
 			.onRenderUpdate( () => Math.min( this.maxFar, this.camera.far ) );
 
 		const linearDepth = viewZToOrthographicDepth( positionView.z, cameraNear, shadowFar ).toVar( 'linearDepth' );
@@ -502,9 +499,26 @@ class CSMShadowNode extends ShadowBaseNode {
 	updateBefore( /*builder*/ ) {
 
 		const light = this.light;
+		const parent = light.parent;
 		const camera = this.camera;
 		const frustums = this.frustums;
 
+		// make sure the placeholder light objects which represent the
+		// multiple cascade shadow casters are part of the scene graph
+
+		for ( let i = 0; i < this.lights.length; i ++ ) {
+
+			const lwLight = this.lights[ i ];
+
+			if ( lwLight.parent === null ) {
+
+				parent.add( lwLight.target );
+				parent.add( lwLight );
+
+			}
+
+		}
+
 		_lightDirection.subVectors( light.target.position, light.position ).normalize();
 
 		// for each frustum we need to find its min-max box aligned with the light orientation