super-three 0.147.1 → 0.152.0

package/examples/jsm/exporters/KTX2Exporter.js

@@ -7,8 +7,9 @@ import {
 	RGIntegerFormat,
 	RedFormat,
 	RedIntegerFormat,
-	LinearEncoding,
-	sRGBEncoding,
+	NoColorSpace,
+	LinearSRGBColorSpace,
+	SRGBColorSpace,
 	DataTexture,
 	REVISION,
 } from 'three';
@@ -22,6 +23,7 @@ import {
 	KHR_DF_CHANNEL_RGBSDA_RED,
 	KHR_DF_MODEL_RGBSDA,
 	KHR_DF_PRIMARIES_BT709,
+	KHR_DF_PRIMARIES_UNSPECIFIED,
 	KHR_DF_SAMPLE_DATATYPE_FLOAT,
 	KHR_DF_SAMPLE_DATATYPE_LINEAR,
 	KHR_DF_SAMPLE_DATATYPE_SIGNED,
@@ -45,40 +47,49 @@ const VK_FORMAT_MAP = {
 
 	[ RGBAFormat ]: {
 		[ FloatType ]: {
-			[ LinearEncoding ]: VK_FORMAT_R32G32B32A32_SFLOAT,
+			[ NoColorSpace ]: VK_FORMAT_R32G32B32A32_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R32G32B32A32_SFLOAT,
 		},
 		[ HalfFloatType ]: {
-			[ LinearEncoding ]: VK_FORMAT_R16G16B16A16_SFLOAT,
+			[ NoColorSpace ]: VK_FORMAT_R16G16B16A16_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R16G16B16A16_SFLOAT,
 		},
 		[ UnsignedByteType ]: {
-			[ LinearEncoding ]: VK_FORMAT_R8G8B8A8_UNORM,
-			[ sRGBEncoding ]: VK_FORMAT_R8G8B8A8_SRGB,
+			[ NoColorSpace ]: VK_FORMAT_R8G8B8A8_UNORM,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R8G8B8A8_UNORM,
+			[ SRGBColorSpace ]: VK_FORMAT_R8G8B8A8_SRGB,
 		},
 	},
 
 	[ RGFormat ]: {
 		[ FloatType ]: {
-			[ LinearEncoding ]: VK_FORMAT_R32G32_SFLOAT,
+			[ NoColorSpace ]: VK_FORMAT_R32G32_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R32G32_SFLOAT,
 		},
 		[ HalfFloatType ]: {
-			[ LinearEncoding ]: VK_FORMAT_R16G16_SFLOAT,
+			[ NoColorSpace ]: VK_FORMAT_R16G16_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R16G16_SFLOAT,
 		},
 		[ UnsignedByteType ]: {
-			[ LinearEncoding ]: VK_FORMAT_R8G8_UNORM,
-			[ sRGBEncoding ]: VK_FORMAT_R8G8_SRGB,
+			[ NoColorSpace ]: VK_FORMAT_R8G8_UNORM,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R8G8_UNORM,
+			[ SRGBColorSpace ]: VK_FORMAT_R8G8_SRGB,
 		},
 	},
 
 	[ RedFormat ]: {
 		[ FloatType ]: {
-			[ LinearEncoding ]: VK_FORMAT_R32_SFLOAT,
+			[ NoColorSpace ]: VK_FORMAT_R32_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R32_SFLOAT,
 		},
 		[ HalfFloatType ]: {
-			[ LinearEncoding ]: VK_FORMAT_R16_SFLOAT,
+			[ NoColorSpace ]: VK_FORMAT_R16_SFLOAT,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R16_SFLOAT,
 		},
 		[ UnsignedByteType ]: {
-			[ LinearEncoding ]: VK_FORMAT_R8_SRGB,
-			[ sRGBEncoding ]: VK_FORMAT_R8_UNORM,
+			[ NoColorSpace ]: VK_FORMAT_R8_UNORM,
+			[ LinearSRGBColorSpace ]: VK_FORMAT_R8_UNORM,
+			[ SRGBColorSpace ]: VK_FORMAT_R8_SRGB,
 		},
 	},
 
@@ -96,7 +107,7 @@ const KHR_DF_CHANNEL_MAP = {
 const ERROR_INPUT = 'THREE.KTX2Exporter: Supported inputs are DataTexture, Data3DTexture, or WebGLRenderer and WebGLRenderTarget.';
 const ERROR_FORMAT = 'THREE.KTX2Exporter: Supported formats are RGBAFormat, RGFormat, or RedFormat.';
 const ERROR_TYPE = 'THREE.KTX2Exporter: Supported types are FloatType, HalfFloatType, or UnsignedByteType."';
-const ERROR_ENCODING = 'THREE.KTX2Exporter: Supported encodings are sRGB (UnsignedByteType only) or Linear.';
+const ERROR_COLOR_SPACE = 'THREE.KTX2Exporter: Supported color spaces are SRGBColorSpace (UnsignedByteType only), LinearSRGBColorSpace, or NoColorSpace.';
 
 export class KTX2Exporter {
 
@@ -130,9 +141,9 @@ export class KTX2Exporter {
 
 		}
 
-		if ( VK_FORMAT_MAP[ texture.format ][ texture.type ][ texture.encoding ] === undefined ) {
+		if ( VK_FORMAT_MAP[ texture.format ][ texture.type ][ texture.colorSpace ] === undefined ) {
 
-			throw new Error( ERROR_ENCODING );
+			throw new Error( ERROR_COLOR_SPACE );
 
 		}
 
@@ -142,7 +153,7 @@ export class KTX2Exporter {
 		const channelCount = getChannelCount( texture );
 		const container = new KTX2Container();
 
-		container.vkFormat = VK_FORMAT_MAP[ texture.format ][ texture.type ][ texture.encoding ];
+		container.vkFormat = VK_FORMAT_MAP[ texture.format ][ texture.type ][ texture.colorSpace ];
 		container.typeSize = array.BYTES_PER_ELEMENT;
 		container.pixelWidth = texture.image.width;
 		container.pixelHeight = texture.image.height;
@@ -157,11 +168,11 @@ export class KTX2Exporter {
 
 		const basicDesc = container.dataFormatDescriptor[ 0 ];
 
-		// TODO: After `texture.encoding` is replaced, distinguish between
-		// non-color data (unspecified model and primaries) and sRGB or Linear-sRGB colors.
 		basicDesc.colorModel = KHR_DF_MODEL_RGBSDA;
-		basicDesc.colorPrimaries = KHR_DF_PRIMARIES_BT709;
-		basicDesc.transferFunction = texture.encoding === sRGBEncoding
+		basicDesc.colorPrimaries = texture.colorSpace === NoColorSpace
+			? KHR_DF_PRIMARIES_UNSPECIFIED
+			: KHR_DF_PRIMARIES_BT709;
+		basicDesc.transferFunction = texture.colorSpace === SRGBColorSpace
 			? KHR_DF_TRANSFER_SRGB
 			: KHR_DF_TRANSFER_LINEAR;
 
@@ -177,7 +188,7 @@ export class KTX2Exporter {
 
 			let channelType = KHR_DF_CHANNEL_MAP[ i ];
 
-			if ( texture.encoding === LinearEncoding ) {
+			if ( texture.colorSpace === LinearSRGBColorSpace || texture.colorSpace === NoColorSpace ) {
 
 				channelType |= KHR_DF_SAMPLE_DATATYPE_LINEAR;
 

package/examples/jsm/exporters/MMDExporter.js

@@ -157,7 +157,7 @@ function unicodeToShiftjis( str ) {
 
 	if ( u2sTable === undefined ) {
 
-		const encoder = new MMDParser.CharsetEncoder(); // eslint-disable-line no-undef
+		const encoder = new MMDParser.CharsetEncoder();
 		const table = encoder.s2uTable;
 		u2sTable = {};
 

package/examples/jsm/exporters/PLYExporter.js

@@ -19,7 +19,7 @@ import {
 
 class PLYExporter {
 
-	parse( object, onDone, options ) {
+	parse( object, onDone, options = {} ) {
 
 		// Iterate over the valid meshes in the object
 		function traverseMeshes( cb ) {
@@ -97,8 +97,15 @@ class PLYExporter {
 				const geometry = mesh.geometry;
 
 				const vertices = geometry.getAttribute( 'position' );
+				const normals = geometry.getAttribute( 'normal' );
+				const colors = geometry.getAttribute( 'color' );
+
 				vertexCount += vertices.count;
 
+				if ( normals !== undefined ) includeNormals = true;
+
+				if ( colors !== undefined ) includeColors = true;
+
 				includeIndices = false;
 
 			}

package/examples/jsm/exporters/STLExporter.js

@@ -13,7 +13,11 @@ class STLExporter {
 
 	parse( scene, options = {} ) {
 
-		const binary = options.binary !== undefined ? options.binary : false;
+		options = Object.assign( {
+			binary: false
+		}, options );
+
+		const binary = options.binary;
 
 		//
 
@@ -120,9 +124,9 @@ class STLExporter {
 
 			if ( object.isSkinnedMesh === true ) {
 
-				object.boneTransform( a, vA );
-				object.boneTransform( b, vB );
-				object.boneTransform( c, vC );
+				object.applyBoneTransform( a, vA );
+				object.applyBoneTransform( b, vB );
+				object.applyBoneTransform( c, vC );
 
 			}
 

package/examples/jsm/exporters/USDZExporter.js

@@ -6,7 +6,14 @@ import * as fflate from '../libs/fflate.module.js';
 
 class USDZExporter {
 
-	async parse( scene, options = { ar: { anchoring: { type: 'plane' }, planeAnchoring: { alignment: 'horizontal' } } } ) {
+	async parse( scene, options = {} ) {
+
+		options = Object.assign( {
+			ar: {
+				anchoring: { type: 'plane' },
+				planeAnchoring: { alignment: 'horizontal' }
+			}
+		}, options );
 
 		const files = {};
 		const modelFileName = 'model.usda';
@@ -75,7 +82,7 @@ class USDZExporter {
 			const color = id.split( '_' )[ 1 ];
 			const isRGBA = texture.format === 1023;
 
-			const canvas = imageToCanvas( texture.image, color );
+			const canvas = imageToCanvas( texture.image, color, texture.flipY );
 			const blob = await new Promise( resolve => canvas.toBlob( resolve, isRGBA ? 'image/png' : 'image/jpeg', 1 ) );
 
 			files[ `textures/Texture_${ id }.${ isRGBA ? 'png' : 'jpg' }` ] = new Uint8Array( await blob.arrayBuffer() );
@@ -115,7 +122,7 @@ class USDZExporter {
 
 }
 
-function imageToCanvas( image, color ) {
+function imageToCanvas( image, color, flipY ) {
 
 	if ( ( typeof HTMLImageElement !== 'undefined' && image instanceof HTMLImageElement ) ||
 		( typeof HTMLCanvasElement !== 'undefined' && image instanceof HTMLCanvasElement ) ||
@@ -129,6 +136,14 @@ function imageToCanvas( image, color ) {
 		canvas.height = image.height * Math.min( 1, scale );
 
 		const context = canvas.getContext( '2d' );
+
+		if ( flipY === true ) {
+
+			context.translate( 0, canvas.height );
+			context.scale( 1, - 1 );
+
+		}
+
 		context.drawImage( image, 0, 0, canvas.width, canvas.height );
 
 		if ( color !== undefined ) {
@@ -156,6 +171,10 @@ function imageToCanvas( image, color ) {
 
 		return canvas;
 
+	} else {
+
+		throw new Error( 'THREE.USDZExporter: No valid image data found. Unable to process texture.' );
+
 	}
 
 }

package/examples/jsm/geometries/ConvexGeometry.js

@@ -15,12 +15,6 @@ class ConvexGeometry extends BufferGeometry {
 		const vertices = [];
 		const normals = [];
 
-		if ( ConvexHull === undefined ) {
-
-			console.error( 'THREE.ConvexGeometry: ConvexGeometry relies on ConvexHull' );
-
-		}
-
 		const convexHull = new ConvexHull().setFromPoints( points );
 
 		// generate vertices and normals

package/examples/jsm/geometries/ParametricGeometry.js

@@ -124,6 +124,16 @@ class ParametricGeometry extends BufferGeometry {
 
 	}
 
+	copy( source ) {
+
+		super.copy( source );
+
+		this.parameters = Object.assign( {}, source.parameters );
+
+		return this;
+
+	}
+
 }
 
 export { ParametricGeometry };

package/examples/jsm/helpers/OctreeHelper.js

@@ -67,6 +67,7 @@ class OctreeHelper extends LineSegments {
 		this.material.dispose();
 
 	}
+
 }
 
 export { OctreeHelper };

package/examples/jsm/helpers/ViewHelper.js

@@ -1,35 +1,49 @@
-import * as THREE from 'three';
-
-const vpTemp = new THREE.Vector4();
-
-class ViewHelper extends THREE.Object3D {
-
-	constructor( editorCamera, dom ) {
+import {
+	BoxGeometry,
+	CanvasTexture,
+	Color,
+	Euler,
+	Mesh,
+	MeshBasicMaterial,
+	Object3D,
+	OrthographicCamera,
+	Quaternion,
+	Raycaster,
+	Sprite,
+	SpriteMaterial,
+	Vector2,
+	Vector3,
+	Vector4
+} from 'three';
+
+class ViewHelper extends Object3D {
+
+	constructor( camera, domElement ) {
 
 		super();
 
 		this.isViewHelper = true;
 
 		this.animating = false;
-		this.controls = null;
+		this.center = new Vector3();
 
-		const color1 = new THREE.Color( '#ff3653' );
-		const color2 = new THREE.Color( '#8adb00' );
-		const color3 = new THREE.Color( '#2c8fff' );
+		const color1 = new Color( '#ff3653' );
+		const color2 = new Color( '#8adb00' );
+		const color3 = new Color( '#2c8fff' );
 
 		const interactiveObjects = [];
-		const raycaster = new THREE.Raycaster();
-		const mouse = new THREE.Vector2();
-		const dummy = new THREE.Object3D();
+		const raycaster = new Raycaster();
+		const mouse = new Vector2();
+		const dummy = new Object3D();
 
-		const camera = new THREE.OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
-		camera.position.set( 0, 0, 2 );
+		const orthoCamera = new OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
+		orthoCamera.position.set( 0, 0, 2 );
 
-		const geometry = new THREE.BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
+		const geometry = new BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
 
-		const xAxis = new THREE.Mesh( geometry, getAxisMaterial( color1 ) );
-		const yAxis = new THREE.Mesh( geometry, getAxisMaterial( color2 ) );
-		const zAxis = new THREE.Mesh( geometry, getAxisMaterial( color3 ) );
+		const xAxis = new Mesh( geometry, getAxisMaterial( color1 ) );
+		const yAxis = new Mesh( geometry, getAxisMaterial( color2 ) );
+		const zAxis = new Mesh( geometry, getAxisMaterial( color3 ) );
 
 		yAxis.rotation.z = Math.PI / 2;
 		zAxis.rotation.y = - Math.PI / 2;
@@ -38,17 +52,17 @@ class ViewHelper extends THREE.Object3D {
 		this.add( zAxis );
 		this.add( yAxis );
 
-		const posXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1, 'X' ) );
+		const posXAxisHelper = new Sprite( getSpriteMaterial( color1, 'X' ) );
 		posXAxisHelper.userData.type = 'posX';
-		const posYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2, 'Y' ) );
+		const posYAxisHelper = new Sprite( getSpriteMaterial( color2, 'Y' ) );
 		posYAxisHelper.userData.type = 'posY';
-		const posZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3, 'Z' ) );
+		const posZAxisHelper = new Sprite( getSpriteMaterial( color3, 'Z' ) );
 		posZAxisHelper.userData.type = 'posZ';
-		const negXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1 ) );
+		const negXAxisHelper = new Sprite( getSpriteMaterial( color1 ) );
 		negXAxisHelper.userData.type = 'negX';
-		const negYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2 ) );
+		const negYAxisHelper = new Sprite( getSpriteMaterial( color2 ) );
 		negYAxisHelper.userData.type = 'negY';
-		const negZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3 ) );
+		const negZAxisHelper = new Sprite( getSpriteMaterial( color3 ) );
 		negZAxisHelper.userData.type = 'negZ';
 
 		posXAxisHelper.position.x = 1;
@@ -75,17 +89,17 @@ class ViewHelper extends THREE.Object3D {
 		interactiveObjects.push( negYAxisHelper );
 		interactiveObjects.push( negZAxisHelper );
 
-		const point = new THREE.Vector3();
+		const point = new Vector3();
 		const dim = 128;
 		const turnRate = 2 * Math.PI; // turn rate in angles per second
 
 		this.render = function ( renderer ) {
 
-			this.quaternion.copy( editorCamera.quaternion ).invert();
+			this.quaternion.copy( camera.quaternion ).invert();
 			this.updateMatrixWorld();
 
 			point.set( 0, 0, 1 );
-			point.applyQuaternion( editorCamera.quaternion );
+			point.applyQuaternion( camera.quaternion );
 
 			if ( point.x >= 0 ) {
 
@@ -125,37 +139,38 @@ class ViewHelper extends THREE.Object3D {
 
 			//
 
-			const x = dom.offsetWidth - dim;
+			const x = domElement.offsetWidth - dim;
 
 			renderer.clearDepth();
 
-			renderer.getViewport( vpTemp );
+			renderer.getViewport( viewport );
 			renderer.setViewport( x, 0, dim, dim );
 
-			renderer.render( this, camera );
+			renderer.render( this, orthoCamera );
 
-			renderer.setViewport( vpTemp.x, vpTemp.y, vpTemp.z, vpTemp.w );
+			renderer.setViewport( viewport.x, viewport.y, viewport.z, viewport.w );
 
 		};
 
-		const targetPosition = new THREE.Vector3();
-		const targetQuaternion = new THREE.Quaternion();
+		const targetPosition = new Vector3();
+		const targetQuaternion = new Quaternion();
 
-		const q1 = new THREE.Quaternion();
-		const q2 = new THREE.Quaternion();
+		const q1 = new Quaternion();
+		const q2 = new Quaternion();
+		const viewport = new Vector4();
 		let radius = 0;
 
 		this.handleClick = function ( event ) {
 
 			if ( this.animating === true ) return false;
 
-			const rect = dom.getBoundingClientRect();
-			const offsetX = rect.left + ( dom.offsetWidth - dim );
-			const offsetY = rect.top + ( dom.offsetHeight - dim );
+			const rect = domElement.getBoundingClientRect();
+			const offsetX = rect.left + ( domElement.offsetWidth - dim );
+			const offsetY = rect.top + ( domElement.offsetHeight - dim );
 			mouse.x = ( ( event.clientX - offsetX ) / ( rect.width - offsetX ) ) * 2 - 1;
 			mouse.y = - ( ( event.clientY - offsetY ) / ( rect.bottom - offsetY ) ) * 2 + 1;
 
-			raycaster.setFromCamera( mouse, camera );
+			raycaster.setFromCamera( mouse, orthoCamera );
 
 			const intersects = raycaster.intersectObjects( interactiveObjects );
 
@@ -164,7 +179,7 @@ class ViewHelper extends THREE.Object3D {
 				const intersection = intersects[ 0 ];
 				const object = intersection.object;
 
-				prepareAnimationData( object, this.controls.center );
+				prepareAnimationData( object, this.center );
 
 				this.animating = true;
 
@@ -181,16 +196,15 @@ class ViewHelper extends THREE.Object3D {
 		this.update = function ( delta ) {
 
 			const step = delta * turnRate;
-			const focusPoint = this.controls.center;
 
 			// animate position by doing a slerp and then scaling the position on the unit sphere
 
 			q1.rotateTowards( q2, step );
-			editorCamera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( focusPoint );
+			camera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( this.center );
 
 			// animate orientation
 
-			editorCamera.quaternion.rotateTowards( targetQuaternion, step );
+			camera.quaternion.rotateTowards( targetQuaternion, step );
 
 			if ( q1.angleTo( q2 ) === 0 ) {
 
@@ -230,32 +244,32 @@ class ViewHelper extends THREE.Object3D {
 
 				case 'posX':
 					targetPosition.set( 1, 0, 0 );
-					targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI * 0.5, 0 ) );
+					targetQuaternion.setFromEuler( new Euler( 0, Math.PI * 0.5, 0 ) );
 					break;
 
 				case 'posY':
 					targetPosition.set( 0, 1, 0 );
-					targetQuaternion.setFromEuler( new THREE.Euler( - Math.PI * 0.5, 0, 0 ) );
+					targetQuaternion.setFromEuler( new Euler( - Math.PI * 0.5, 0, 0 ) );
 					break;
 
 				case 'posZ':
 					targetPosition.set( 0, 0, 1 );
-					targetQuaternion.setFromEuler( new THREE.Euler() );
+					targetQuaternion.setFromEuler( new Euler() );
 					break;
 
 				case 'negX':
 					targetPosition.set( - 1, 0, 0 );
-					targetQuaternion.setFromEuler( new THREE.Euler( 0, - Math.PI * 0.5, 0 ) );
+					targetQuaternion.setFromEuler( new Euler( 0, - Math.PI * 0.5, 0 ) );
 					break;
 
 				case 'negY':
 					targetPosition.set( 0, - 1, 0 );
-					targetQuaternion.setFromEuler( new THREE.Euler( Math.PI * 0.5, 0, 0 ) );
+					targetQuaternion.setFromEuler( new Euler( Math.PI * 0.5, 0, 0 ) );
 					break;
 
 				case 'negZ':
 					targetPosition.set( 0, 0, - 1 );
-					targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI, 0 ) );
+					targetQuaternion.setFromEuler( new Euler( 0, Math.PI, 0 ) );
 					break;
 
 				default:
@@ -265,12 +279,12 @@ class ViewHelper extends THREE.Object3D {
 
 			//
 
-			radius = editorCamera.position.distanceTo( focusPoint );
+			radius = camera.position.distanceTo( focusPoint );
 			targetPosition.multiplyScalar( radius ).add( focusPoint );
 
 			dummy.position.copy( focusPoint );
 
-			dummy.lookAt( editorCamera.position );
+			dummy.lookAt( camera.position );
 			q1.copy( dummy.quaternion );
 
 			dummy.lookAt( targetPosition );
@@ -280,7 +294,7 @@ class ViewHelper extends THREE.Object3D {
 
 		function getAxisMaterial( color ) {
 
-			return new THREE.MeshBasicMaterial( { color: color, toneMapped: false } );
+			return new MeshBasicMaterial( { color: color, toneMapped: false } );
 
 		}
 
@@ -306,9 +320,9 @@ class ViewHelper extends THREE.Object3D {
 
 			}
 
-			const texture = new THREE.CanvasTexture( canvas );
+			const texture = new CanvasTexture( canvas );
 
-			return new THREE.SpriteMaterial( { map: texture, toneMapped: false } );
+			return new SpriteMaterial( { map: texture, toneMapped: false } );
 
 		}
 

package/examples/jsm/interactive/HTMLMesh.js

@@ -4,7 +4,7 @@ import {
 	Mesh,
 	MeshBasicMaterial,
 	PlaneGeometry,
-	sRGBEncoding,
+	SRGBColorSpace,
 	Color
 } from 'three';
 
@@ -36,7 +36,7 @@ class HTMLMesh extends Mesh {
 			material.dispose();
 
 			material.map.dispose();
-			
+
 			canvases.delete( dom );
 
 			this.removeEventListener( 'mousedown', onEvent );
@@ -59,7 +59,7 @@ class HTMLTexture extends CanvasTexture {
 		this.dom = dom;
 
 		this.anisotropy = 16;
-		this.encoding = sRGBEncoding;
+		this.colorSpace = SRGBColorSpace;
 		this.minFilter = LinearFilter;
 		this.magFilter = LinearFilter;
 
@@ -273,6 +273,19 @@ function html2canvas( element ) {
 			context.drawImage( element, 0, 0 );
 			context.restore();
 
+		} else if ( element instanceof HTMLImageElement ) {
+
+			if ( element.style.display === 'none' ) return;
+
+			const rect = element.getBoundingClientRect();
+
+			x = rect.left - offset.left - 0.5;
+			y = rect.top - offset.top - 0.5;
+			width = rect.width;
+			height = rect.height;
+
+			context.drawImage( element, x, y, width, height );
+
 		} else {
 
 			if ( element.style.display === 'none' ) return;

package/examples/jsm/interactive/InteractiveGroup.js

@@ -28,7 +28,7 @@ class InteractiveGroup extends Group {
 			event.stopPropagation();
 
 			const rect = renderer.domElement.getBoundingClientRect();
-			
+
 			_pointer.x = ( event.clientX - rect.left ) / rect.width * 2 - 1;
 			_pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
 

package/examples/{js → jsm}/libs/basis/README.md

@@ -20,15 +20,15 @@ The folder contains two files required for transcoding `.basis` or `.ktx2` textu
 * `basis_transcoder.js` — JavaScript wrapper for the WebAssembly transcoder.
 * `basis_transcoder.wasm` — WebAssembly transcoder.
 
-Both are dependencies of `THREE.KTX2Loader` and `THREE.BasisTextureLoader`:
+Both are dependencies of `KTX2Loader`:
 
 ```js
-var ktx2Loader = new THREE.KTX2Loader();
-ktx2Loader.setTranscoderPath( 'examples/js/libs/basis/' );
+const ktx2Loader = new KTX2Loader();
+ktx2Loader.setTranscoderPath( 'examples/jsm/libs/basis/' );
 ktx2Loader.detectSupport( renderer );
 ktx2Loader.load( 'diffuse.ktx2', function ( texture ) {
 
-	var material = new THREE.MeshStandardMaterial( { map: texture } );
+	const material = new THREE.MeshStandardMaterial( { map: texture } );
 
 }, function () {