super-three 0.169.1 → 0.170.0

package/examples/jsm/misc/ProgressiveLightMap.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { DoubleSide, FloatType, HalfFloatType, Mesh, MeshBasicMaterial, MeshPhongMaterial, PlaneGeometry, Scene, WebGLRenderTarget } from 'three';
 import { potpack } from '../libs/potpack.module.js';
 
 /**
@@ -14,8 +14,8 @@ import { potpack } from '../libs/potpack.module.js';
  * your objects, so you can start jittering lighting to achieve
  * the texture-space effect you're looking for.
  *
- * @param {WebGLRenderer} renderer A WebGL Rendering Context
- * @param {number} res The side-long dimension of you total lightmap
+ * @param {WebGLRenderer} renderer An instance of WebGLRenderer.
+ * @param {number} res The side-long dimension of you total lightmap.
  */
 class ProgressiveLightMap {
 
@@ -24,22 +24,20 @@ class ProgressiveLightMap {
 		this.renderer = renderer;
 		this.res = res;
 		this.lightMapContainers = [];
-		this.compiled = false;
-		this.scene = new THREE.Scene();
-		this.scene.background = null;
-		this.tinyTarget = new THREE.WebGLRenderTarget( 1, 1 );
+		this.scene = new Scene();
 		this.buffer1Active = false;
 		this.firstUpdate = true;
-		this.warned = false;
+		this.labelMesh = null;
+		this.blurringPlane = null;
 
 		// Create the Progressive LightMap Texture
-		const format = /(Android|iPad|iPhone|iPod)/g.test( navigator.userAgent ) ? THREE.HalfFloatType : THREE.FloatType;
-		this.progressiveLightMap1 = new THREE.WebGLRenderTarget( this.res, this.res, { type: format } );
-		this.progressiveLightMap2 = new THREE.WebGLRenderTarget( this.res, this.res, { type: format } );
+		const format = /(Android|iPad|iPhone|iPod)/g.test( navigator.userAgent ) ? HalfFloatType : FloatType;
+		this.progressiveLightMap1 = new WebGLRenderTarget( this.res, this.res, { type: format } );
+		this.progressiveLightMap2 = new WebGLRenderTarget( this.res, this.res, { type: format } );
 		this.progressiveLightMap2.texture.channel = 1;
 
 		// Inject some spicy new logic into a standard phong material
-		this.uvMat = new THREE.MeshPhongMaterial();
+		this.uvMat = new MeshPhongMaterial();
 		this.uvMat.uniforms = {};
 		this.uvMat.onBeforeCompile = ( shader ) => {
 
@@ -71,8 +69,6 @@ class ProgressiveLightMap {
 			// Set the new Shader to this
 			this.uvMat.userData.shader = shader;
 
-			this.compiled = true;
-
 		};
 
 	}
@@ -97,13 +93,13 @@ class ProgressiveLightMap {
 
 			}
 
-			if ( ! object.geometry.hasAttribute( 'uv' ) ) {
+			if ( object.geometry.hasAttribute( 'uv' ) === false ) {
 
-				console.warn( 'All lightmap objects need UVs!' ); continue;
+				console.warn( 'THREE.ProgressiveLightMap: All lightmap objects need uvs.' ); continue;
 
 			}
 
-			if ( this.blurringPlane == null ) {
+			if ( this.blurringPlane === null ) {
 
 				this._initializeBlurPlane( this.res, this.progressiveLightMap1 );
 
@@ -123,8 +119,6 @@ class ProgressiveLightMap {
 
 			this.lightMapContainers.push( { basicMat: object.material, object: object } );
 
-			this.compiled = false;
-
 		}
 
 		// Pack the objects' lightmap UVs into the same global space
@@ -154,7 +148,7 @@ class ProgressiveLightMap {
 	 */
 	update( camera, blendWindow = 100, blurEdges = true ) {
 
-		if ( this.blurringPlane == null ) {
+		if ( this.blurringPlane === null ) {
 
 			return;
 
@@ -175,11 +169,10 @@ class ProgressiveLightMap {
 
 		}
 
-		// Render once normally to initialize everything
-		if ( this.firstUpdate ) {
+		// Initialize everything
+		if ( this.firstUpdate === true ) {
 
-			this.renderer.setRenderTarget( this.tinyTarget ); // Tiny for Speed
-			this.renderer.render( this.scene, camera );
+			this.renderer.compile( this.scene, camera );
 			this.firstUpdate = false;
 
 		}
@@ -228,30 +221,25 @@ class ProgressiveLightMap {
 	*/
 	showDebugLightmap( visible, position = undefined ) {
 
-		if ( this.lightMapContainers.length == 0 ) {
-
-			if ( ! this.warned ) {
+		if ( this.lightMapContainers.length === 0 ) {
 
-				console.warn( 'Call this after adding the objects!' ); this.warned = true;
-
-			}
+			console.warn( 'THREE.ProgressiveLightMap: Call .showDebugLightmap() after adding the objects.' );
 
 			return;
 
 		}
 
-		if ( this.labelMesh == null ) {
+		if ( this.labelMesh === null ) {
 
-			this.labelMaterial = new THREE.MeshBasicMaterial(
-				{ map: this.progressiveLightMap1.texture, side: THREE.DoubleSide } );
-			this.labelPlane = new THREE.PlaneGeometry( 100, 100 );
-			this.labelMesh = new THREE.Mesh( this.labelPlane, this.labelMaterial );
+			const labelMaterial = new MeshBasicMaterial( { map: this.progressiveLightMap1.texture, side: DoubleSide } );
+			const labelGeometry = new PlaneGeometry( 100, 100 );
+			this.labelMesh = new Mesh( labelGeometry, labelMaterial );
 			this.labelMesh.position.y = 250;
 			this.lightMapContainers[ 0 ].object.parent.add( this.labelMesh );
 
 		}
 
-		if ( position != undefined ) {
+		if ( position !== undefined ) {
 
 			this.labelMesh.position.copy( position );
 
@@ -268,7 +256,7 @@ class ProgressiveLightMap {
 	 */
 	_initializeBlurPlane( res, lightMap = null ) {
 
-		const blurMaterial = new THREE.MeshBasicMaterial();
+		const blurMaterial = new MeshBasicMaterial();
 		blurMaterial.uniforms = { previousShadowMap: { value: null },
 								  pixelOffset: { value: 1.0 / res },
 								  polygonOffset: true, polygonOffsetFactor: - 1, polygonOffsetUnits: 3.0 };
@@ -306,11 +294,9 @@ class ProgressiveLightMap {
 			// Set the new Shader to this
 			blurMaterial.userData.shader = shader;
 
-			this.compiled = true;
-
 		};
 
-		this.blurringPlane = new THREE.Mesh( new THREE.PlaneGeometry( 1, 1 ), blurMaterial );
+		this.blurringPlane = new Mesh( new PlaneGeometry( 1, 1 ), blurMaterial );
 		this.blurringPlane.name = 'Blurring Plane';
 		this.blurringPlane.frustumCulled = false;
 		this.blurringPlane.renderOrder = 0;
@@ -319,6 +305,32 @@ class ProgressiveLightMap {
 
 	}
 
+	/**
+	 * Frees all internal resources.
+	 */
+	dispose() {
+
+		this.progressiveLightMap1.dispose();
+		this.progressiveLightMap2.dispose();
+
+		this.uvMat.dispose();
+
+		if ( this.blurringPlane !== null ) {
+
+			this.blurringPlane.geometry.dispose();
+			this.blurringPlane.material.dispose();
+
+		}
+
+		if ( this.labelMesh !== null ) {
+
+			this.labelMesh.geometry.dispose();
+			this.labelMesh.material.dispose();
+
+		}
+
+	}
+
 }
 
 export { ProgressiveLightMap };

package/examples/jsm/misc/ProgressiveLightMapGPU.js

@@ -0,0 +1,293 @@
+import { DoubleSide, FloatType, HalfFloatType, PlaneGeometry, Mesh, RenderTarget, Scene } from 'three';
+import { add, float, mix, MeshPhongNodeMaterial, NodeMaterial, output, sub, texture, uniform, uv, vec2, vec4 } from 'three/tsl';
+
+import { potpack } from '../libs/potpack.module.js';
+
+/**
+ * Progressive Light Map Accumulator, by [zalo](https://github.com/zalo/)
+ *
+ * To use, simply construct a `ProgressiveLightMap` object,
+ * `plmap.addObjectsToLightMap(object)` an array of semi-static
+ * objects and lights to the class once, and then call
+ * `plmap.update(camera)` every frame to begin accumulating
+ * lighting samples.
+ *
+ * This should begin accumulating lightmaps which apply to
+ * your objects, so you can start jittering lighting to achieve
+ * the texture-space effect you're looking for.
+ *
+ * @param {WebGPURenderer} renderer An instance of WebGPURenderer.
+ * @param {number} resolution The side-long dimension of you total lightmap.
+ */
+class ProgressiveLightMap {
+
+	constructor( renderer, resolution = 1024 ) {
+
+		this.renderer = renderer;
+		this.resolution = resolution;
+
+		this._lightMapContainers = [];
+		this._scene = new Scene();
+		this._buffer1Active = false;
+		this._labelMesh = null;
+		this._blurringPlane = null;
+
+		// Create the Progressive LightMap Texture
+
+		const type = /(Android|iPad|iPhone|iPod)/g.test( navigator.userAgent ) ? HalfFloatType : FloatType;
+		this._progressiveLightMap1 = new RenderTarget( this.resolution, this.resolution, { type: type } );
+		this._progressiveLightMap2 = new RenderTarget( this.resolution, this.resolution, { type: type } );
+		this._progressiveLightMap2.texture.channel = 1;
+
+		// uniforms
+
+		this._averagingWindow = uniform( 100 );
+		this._previousShadowMap = texture( this._progressiveLightMap1.texture );
+
+		// materials
+
+		const uvNode = uv( 1 ).flipY();
+
+		this._uvMat = new MeshPhongNodeMaterial();
+		this._uvMat.vertexNode = vec4( sub( uvNode, vec2( 0.5 ) ).mul( 2 ), 1, 1 );
+		this._uvMat.outputNode = vec4( mix( this._previousShadowMap.uv( uv( 1 ) ), output, float( 1 ).div( this._averagingWindow ) ) );
+
+	}
+
+	/**
+	 * Sets these objects' materials' lightmaps and modifies their uv1's.
+	 * @param {Object3D} objects An array of objects and lights to set up your lightmap.
+	 */
+	addObjectsToLightMap( objects ) {
+
+		// Prepare list of UV bounding boxes for packing later...
+		const uv_boxes = [];
+
+		const padding = 3 / this.resolution;
+
+		for ( let ob = 0; ob < objects.length; ob ++ ) {
+
+			const object = objects[ ob ];
+
+			// If this object is a light, simply add it to the internal scene
+			if ( object.isLight ) {
+
+				this._scene.attach( object ); continue;
+
+			}
+
+			if ( object.geometry.hasAttribute( 'uv' ) === false ) {
+
+				console.warn( 'THREE.ProgressiveLightMap: All lightmap objects need uvs.' ); continue;
+
+			}
+
+			if ( this._blurringPlane === null ) {
+
+				this._initializeBlurPlane();
+
+			}
+
+			// Apply the lightmap to the object
+			object.material.lightMap = this._progressiveLightMap2.texture;
+			object.material.dithering = true;
+			object.castShadow = true;
+			object.receiveShadow = true;
+			object.renderOrder = 1000 + ob;
+
+			// Prepare UV boxes for potpack
+			// TODO: Size these by object surface area
+			uv_boxes.push( { w: 1 + ( padding * 2 ), h: 1 + ( padding * 2 ), index: ob } );
+
+			this._lightMapContainers.push( { basicMat: object.material, object: object } );
+
+		}
+
+		// Pack the objects' lightmap UVs into the same global space
+		const dimensions = potpack( uv_boxes );
+		uv_boxes.forEach( ( box ) => {
+
+			const uv1 = objects[ box.index ].geometry.getAttribute( 'uv' ).clone();
+			for ( let i = 0; i < uv1.array.length; i += uv1.itemSize ) {
+
+				uv1.array[ i ] = ( uv1.array[ i ] + box.x + padding ) / dimensions.w;
+				uv1.array[ i + 1 ] = 1 - ( ( uv1.array[ i + 1 ] + box.y + padding ) / dimensions.h );
+
+			}
+
+			objects[ box.index ].geometry.setAttribute( 'uv1', uv1 );
+			objects[ box.index ].geometry.getAttribute( 'uv1' ).needsUpdate = true;
+
+		} );
+
+	}
+
+	/**
+	 * Frees all internal resources.
+	 */
+	dispose() {
+
+		this._progressiveLightMap1.dispose();
+		this._progressiveLightMap2.dispose();
+
+		this._uvMat.dispose();
+
+		if ( this._blurringPlane !== null ) {
+
+			this._blurringPlane.geometry.dispose();
+			this._blurringPlane.material.dispose();
+
+		}
+
+		if ( this._labelMesh !== null ) {
+
+			this._labelMesh.geometry.dispose();
+			this._labelMesh.material.dispose();
+
+		}
+
+	}
+
+	/**
+	 * This function renders each mesh one at a time into their respective surface maps
+	 * @param {Camera} camera Standard Rendering Camera
+	 * @param {number} blendWindow When >1, samples will accumulate over time.
+	 * @param {boolean} blurEdges  Whether to fix UV Edges via blurring
+	 */
+	update( camera, blendWindow = 100, blurEdges = true ) {
+
+		if ( this._blurringPlane === null ) {
+
+			return;
+
+		}
+
+		// Store the original Render Target
+		const currentRenderTarget = this.renderer.getRenderTarget();
+
+		// The blurring plane applies blur to the seams of the lightmap
+		this._blurringPlane.visible = blurEdges;
+
+		// Steal the Object3D from the real world to our special dimension
+		for ( let l = 0; l < this._lightMapContainers.length; l ++ ) {
+
+			this._lightMapContainers[ l ].object.oldScene = this._lightMapContainers[ l ].object.parent;
+			this._scene.attach( this._lightMapContainers[ l ].object );
+
+		}
+
+		// Set each object's material to the UV Unwrapped Surface Mapping Version
+		for ( let l = 0; l < this._lightMapContainers.length; l ++ ) {
+
+			this._averagingWindow.value = blendWindow;
+			this._lightMapContainers[ l ].object.material = this._uvMat;
+			this._lightMapContainers[ l ].object.oldFrustumCulled = this._lightMapContainers[ l ].object.frustumCulled;
+			this._lightMapContainers[ l ].object.frustumCulled = false;
+
+		}
+
+		// Ping-pong two surface buffers for reading/writing
+		const activeMap = this._buffer1Active ? this._progressiveLightMap1 : this._progressiveLightMap2;
+		const inactiveMap = this._buffer1Active ? this._progressiveLightMap2 : this._progressiveLightMap1;
+
+		// Render the object's surface maps
+		this.renderer.setRenderTarget( activeMap );
+		this._previousShadowMap.value = inactiveMap.texture;
+
+		this._buffer1Active = ! this._buffer1Active;
+		this.renderer.render( this._scene, camera );
+
+		// Restore the object's Real-time Material and add it back to the original world
+		for ( let l = 0; l < this._lightMapContainers.length; l ++ ) {
+
+			this._lightMapContainers[ l ].object.frustumCulled = this._lightMapContainers[ l ].object.oldFrustumCulled;
+			this._lightMapContainers[ l ].object.material = this._lightMapContainers[ l ].basicMat;
+			this._lightMapContainers[ l ].object.oldScene.attach( this._lightMapContainers[ l ].object );
+
+		}
+
+		// Restore the original Render Target
+		this.renderer.setRenderTarget( currentRenderTarget );
+
+	}
+
+	/**
+	 * Draw the lightmap in the main scene.  Call this after adding the objects to it.
+	 * @param {boolean} visible Whether the debug plane should be visible.
+	 * @param {Vector3} position Where the debug plane should be drawn.
+	*/
+	showDebugLightmap( visible, position = null ) {
+
+		if ( this._lightMapContainers.length === 0 ) {
+
+			console.warn( 'THREE.ProgressiveLightMap: Call .showDebugLightmap() after adding the objects.' );
+
+			return;
+
+		}
+
+		if ( this._labelMesh === null ) {
+
+			const labelMaterial = new NodeMaterial();
+			labelMaterial.colorNode = texture( this._progressiveLightMap1.texture ).uv( uv().flipY() );
+			labelMaterial.side = DoubleSide;
+
+			const labelGeometry = new PlaneGeometry( 100, 100 );
+
+			this._labelMesh = new Mesh( labelGeometry, labelMaterial );
+			this._labelMesh.position.y = 250;
+
+			this._lightMapContainers[ 0 ].object.parent.add( this._labelMesh );
+
+		}
+
+		if ( position !== null ) {
+
+			this._labelMesh.position.copy( position );
+
+		}
+
+		this._labelMesh.visible = visible;
+
+	}
+
+	/**
+	 * Creates the Blurring Plane.
+	 */
+	_initializeBlurPlane() {
+
+		const blurMaterial = new NodeMaterial();
+		blurMaterial.polygonOffset = true;
+		blurMaterial.polygonOffsetFactor = - 1;
+		blurMaterial.polygonOffsetUnits = 3;
+
+		blurMaterial.vertexNode = vec4( sub( uv(), vec2( 0.5 ) ).mul( 2 ), 1, 1 );
+
+		const uvNode = uv().flipY().toVar();
+		const pixelOffset = float( 0.5 ).div( float( this.resolution ) ).toVar();
+
+		const color = add(
+			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset, 0 ) ) ),
+			this._previousShadowMap.uv( uvNode.add( vec2( 0, pixelOffset ) ) ),
+			this._previousShadowMap.uv( uvNode.add( vec2( 0, pixelOffset.negate() ) ) ),
+			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset.negate(), 0 ) ) ),
+			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset, pixelOffset ) ) ),
+			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset.negate(), pixelOffset ) ) ),
+			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset, pixelOffset.negate() ) ) ),
+			this._previousShadowMap.uv( uvNode.add( vec2( pixelOffset.negate(), pixelOffset.negate() ) ) ),
+		).div( 8 );
+
+		blurMaterial.fragmentNode = color;
+
+		this._blurringPlane = new Mesh( new PlaneGeometry( 1, 1 ), blurMaterial );
+		this._blurringPlane.name = 'Blurring Plane';
+		this._blurringPlane.frustumCulled = false;
+		this._blurringPlane.renderOrder = 0;
+		this._blurringPlane.material.depthWrite = false;
+		this._scene.add( this._blurringPlane );
+
+	}
+
+}
+
+export { ProgressiveLightMap };

package/examples/jsm/misc/VolumeSlice.js

@@ -68,6 +68,7 @@ class VolumeSlice {
 
 		const canvasMap = new Texture( this.canvas );
 		canvasMap.minFilter = LinearFilter;
+		canvasMap.generateMipmaps = false;
 		canvasMap.wrapS = canvasMap.wrapT = ClampToEdgeWrapping;
 		canvasMap.colorSpace = SRGBColorSpace;
 		const material = new MeshBasicMaterial( { map: canvasMap, side: DoubleSide, transparent: true } );

package/examples/jsm/objects/WaterMesh.js

@@ -3,7 +3,7 @@ import {
 	Mesh,
 	Vector3
 } from 'three';
-import { Fn, NodeMaterial, add, cameraPosition, div, normalize, positionWorld, sub, timerLocal, texture, vec2, vec3, vec4, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix } from 'three/tsl';
+import { Fn, NodeMaterial, add, cameraPosition, div, normalize, positionWorld, sub, time, texture, vec2, vec3, vec4, max, dot, reflect, pow, length, float, uniform, reflector, mul, mix } from 'three/tsl';
 
 /**
  * Work based on :
@@ -36,14 +36,14 @@ class WaterMesh extends Mesh {
 
 		// TSL
 
-		const timeNode = timerLocal();
-
 		const getNoise = Fn( ( [ uv ] ) => {
 
-			const uv0 = add( div( uv, 103 ), vec2( div( timeNode, 17 ), div( timeNode, 29 ) ) ).toVar();
-			const uv1 = div( uv, 107 ).sub( vec2( div( timeNode, - 19 ), div( timeNode, 31 ) ) ).toVar();
-			const uv2 = add( div( uv, vec2( 8907.0, 9803.0 ) ), vec2( div( timeNode, 101 ), div( timeNode, 97 ) ) ).toVar();
-			const uv3 = sub( div( uv, vec2( 1091.0, 1027.0 ) ), vec2( div( timeNode, 109 ), div( timeNode, - 113 ) ) ).toVar();
+			const offset = time;
+
+			const uv0 = add( div( uv, 103 ), vec2( div( offset, 17 ), div( offset, 29 ) ) ).toVar();
+			const uv1 = div( uv, 107 ).sub( vec2( div( offset, - 19 ), div( offset, 31 ) ) ).toVar();
+			const uv2 = add( div( uv, vec2( 8907.0, 9803.0 ) ), vec2( div( offset, 101 ), div( offset, 97 ) ) ).toVar();
+			const uv3 = sub( div( uv, vec2( 1091.0, 1027.0 ) ), vec2( div( offset, 109 ), div( offset, - 113 ) ) ).toVar();
 
 			const sample0 = this.waterNormals.uv( uv0 );
 			const sample1 = this.waterNormals.uv( uv1 );
@@ -74,7 +74,7 @@ class WaterMesh extends Mesh {
 
 			const distance = length( worldToEye );
 
-			const distortion = surfaceNormal.xy.mul( float( 0.001 ).add( float( 1.0 ).div( distance ) ) ).mul( this.distortionScale );
+			const distortion = surfaceNormal.xz.mul( float( 0.001 ).add( float( 1.0 ).div( distance ) ) ).mul( this.distortionScale );
 
 			const mirrorSampler = reflector();
 			mirrorSampler.uvNode = mirrorSampler.uvNode.add( distortion );

package/examples/jsm/postprocessing/AfterimagePass.js

@@ -1,12 +1,13 @@
 import {
 	HalfFloatType,
-	MeshBasicMaterial,
 	NearestFilter,
+	NoBlending,
 	ShaderMaterial,
 	UniformsUtils,
 	WebGLRenderTarget
 } from 'three';
 import { Pass, FullScreenQuad } from './Pass.js';
+import { CopyShader } from '../shaders/CopyShader.js';
 import { AfterimageShader } from '../shaders/AfterimageShader.js';
 
 class AfterimagePass extends Pass {
@@ -41,7 +42,17 @@ class AfterimagePass extends Pass {
 
 		this.compFsQuad = new FullScreenQuad( this.compFsMaterial );
 
-		this.copyFsMaterial = new MeshBasicMaterial();
+		const copyShader = CopyShader;
+
+		this.copyFsMaterial = new ShaderMaterial( {
+			uniforms: UniformsUtils.clone( copyShader.uniforms ),
+			vertexShader: copyShader.vertexShader,
+			fragmentShader: copyShader.fragmentShader,
+			blending: NoBlending,
+			depthTest: false,
+			depthWrite: false
+		} );
+
 		this.copyFsQuad = new FullScreenQuad( this.copyFsMaterial );
 
 	}
@@ -54,7 +65,7 @@ class AfterimagePass extends Pass {
 		renderer.setRenderTarget( this.textureComp );
 		this.compFsQuad.render( renderer );
 
-		this.copyFsQuad.material.map = this.textureComp.texture;
+		this.copyFsQuad.material.uniforms.tDiffuse.value = this.textureComp.texture;
 
 		if ( this.renderToScreen ) {
 

package/examples/jsm/postprocessing/SSRPass.js

@@ -558,9 +558,13 @@ class SSRPass extends Pass {
 		this.originalClearColor.copy( renderer.getClearColor( this.tempColor ) );
 		const originalClearAlpha = renderer.getClearAlpha( this.tempColor );
 		const originalAutoClear = renderer.autoClear;
+		const originalBackground = this.scene.background;
+		const originalFog = this.scene.fog;
 
 		renderer.setRenderTarget( renderTarget );
 		renderer.autoClear = false;
+		this.scene.background = null;
+		this.scene.fog = null;
 
 		clearColor = overrideMaterial.clearColor || clearColor;
 		clearAlpha = overrideMaterial.clearAlpha || clearAlpha;
@@ -599,6 +603,8 @@ class SSRPass extends Pass {
 		renderer.autoClear = originalAutoClear;
 		renderer.setClearColor( this.originalClearColor );
 		renderer.setClearAlpha( originalClearAlpha );
+		this.scene.background = originalBackground;
+		this.scene.fog = originalFog;
 
 	}
 

package/examples/jsm/renderers/CSS2DRenderer.js

@@ -26,9 +26,12 @@ class CSS2DObject extends Object3D {
 
 			this.traverse( function ( object ) {
 
-				if ( object.element instanceof Element && object.element.parentNode !== null ) {
+				if (
+					object.element instanceof object.element.ownerDocument.defaultView.Element &&
+					object.element.parentNode !== null
+				) {
 
-					object.element.parentNode.removeChild( object.element );
+					object.element.remove();
 
 				}
 
@@ -135,7 +138,7 @@ class CSS2DRenderer {
 				return;
 
 			}
-			
+
 			if ( object.isCSS2DObject ) {
 
 				_vector.setFromMatrixPosition( object.matrixWorld );

package/examples/jsm/renderers/CSS3DRenderer.js

@@ -32,9 +32,12 @@ class CSS3DObject extends Object3D {
 
 			this.traverse( function ( object ) {
 
-				if ( object.element instanceof Element && object.element.parentNode !== null ) {
+				if (
+					object.element instanceof object.element.ownerDocument.defaultView.Element &&
+					object.element.parentNode !== null
+				) {
 
-					object.element.parentNode.removeChild( object.element );
+					object.element.remove();
 
 				}
 
@@ -254,10 +257,10 @@ class CSS3DRenderer {
 		function hideObject( object ) {
 
 			if ( object.isCSS3DObject ) object.element.style.display = 'none';
-	  
+
 			for ( let i = 0, l = object.children.length; i < l; i ++ ) {
 
-			  hideObject( object.children[ i ] );
+				hideObject( object.children[ i ] );
 
 			}