Editor: load image as Plane

editor/js/Loader.js

@@ -698,6 +698,15 @@ fileHandlers[ 'zip' ] = function ( editor, manager, reader, file ) {
 
 };
 
+fileHandlers[ 'png' ] = handleImages;
+fileHandlers[ 'jpg' ] = handleImages;
+fileHandlers[ 'jpeg' ] = handleImages;
+fileHandlers[ 'bmp' ] = handleImages;
+fileHandlers[ 'webp' ] = handleImages;
+fileHandlers[ 'gif' ] = handleImages;
+fileHandlers[ 'avif' ] = handleImages;
+fileHandlers[ 'png' ] = handleImages;
+
 Loader.getSupportedFileFormats = function () {
 
 	return Object.keys( fileHandlers ).sort();
@@ -784,6 +793,29 @@ function handleJSON( editor, texturePath, data ) {
 
 }
 
+function handleImages( editor, manager, reader, file ) {
+
+	const image = new Image();
+	image.src = URL.createObjectURL( file );
+
+	image.onload = function () {
+
+		const texture = new THREE.Texture( image );
+		texture.colorSpace = THREE.SRGBColorSpace;
+		texture.needsUpdate = true;
+
+		const size = 4;
+		const geometry = new THREE.PlaneGeometry( size * image.width / image.height, size );
+		const material = new THREE.MeshBasicMaterial( { map: texture } );
+		const mesh = new THREE.Mesh( geometry, material );
+		mesh.name = file.name;
+
+		editor.execute( new AddObjectCommand( editor, mesh ) );
+
+	};
+
+}
+
 async function handleZIP( editor, contents ) {
 
 	const zip = unzipSync( new Uint8Array( contents ) );