Merge pull request #12680 from donmccurdy/feat-gltfexporter-texture-data-uris

GLTFExporter: Export textures as data URIs.

docs/examples/exporters/GLTFExporter.html

@@ -79,6 +79,7 @@ exporter.parse( [ scene1, object1, object2, scene2 ], ...)
 			<li>onlyVisible - bool. Export only visible objects. Default is true.</li>
 			<li>truncateDrawRange - bool. Export just the attributes within the drawRange, if defined, instead of exporting the whole array. Default is true.</li>
 			<li>binary - bool. Export in binary (.glb) format, returning an ArrayBuffer. Default is false.</li>
+			<li>embedImages - bool. Export with images embedded into the glTF asset. Default is true.</li>
 		</ul>
 		</div>
 		<div>

examples/js/exporters/GLTFExporter.js

@@ -61,7 +61,8 @@ THREE.GLTFExporter.prototype = {
 		var DEFAULT_OPTIONS = {
 			trs: false,
 			onlyVisible: true,
-			truncateDrawRange: true
+			truncateDrawRange: true,
+			embedImages: true
 		};
 
 		options = Object.assign( {}, DEFAULT_OPTIONS, options );
@@ -86,6 +87,8 @@ THREE.GLTFExporter.prototype = {
 
 		};
 
+		var cachedCanvas;
+
 		/**
 		 * Compare two arrays
 		 */
@@ -368,15 +371,23 @@ THREE.GLTFExporter.prototype = {
 
 			}
 
-			var gltfImage = {};
+			var mimeType = map.format === THREE.RGBAFormat ? 'image/png' : 'image/jpeg';
+			var gltfImage = {mimeType: mimeType};
 
 			if ( options.embedImages ) {
 
-				// @TODO { bufferView, mimeType }
+				var canvas = cachedCanvas = cachedCanvas || document.createElement( 'canvas' );
+				canvas.width = map.image.width;
+				canvas.height = map.image.height;
+				var ctx = canvas.getContext( '2d' );
+				ctx.drawImage( map.image, 0, 0 );
+
+				// @TODO Embed in { bufferView } if options.binary set.
+
+				gltfImage.uri = canvas.toDataURL( mimeType );
 
 			} else {
 
-				// @TODO base64 based on options
 				gltfImage.uri = map.image.src;
 
 			}