Editor: Add support for importing OBJ/MTL assets with textures.

[hopepdm]

Description of the problem

The obj format model is a very commonly used format. When importing obj and mtl, you need zip. . After importing, the geometry and material can be loaded normally, but the texture map has an error. After checking, I found that it is related to the following code. It is not useful to process the material-related pictures in the zip. . This is not necessarily a bug, but it affects the experience more.

//editor/js/Loader.js( function handleZip() )
// Poly

if ( zip.files[ 'model.obj' ] && zip.files[ 'materials.mtl' ] ) {

	var materials = new MTLLoader().parse( zip.file( 'materials.mtl' ).asText() );
	var object = new OBJLoader().setMaterials( materials ).parse( zip.file( 'model.obj' ).asText() );
	editor.execute( new AddObjectCommand( editor, object ) );

}

Three.js version

• Dev
• r118
• ...

Browser

• All of them

OS

• Windows

Hardware Requirements (graphics card, VR Device, ...)

[Mugen87]

I'm afraid there is not easy way of fixing this. When the MTL file is extracted from the zip archive and then parsed, the loader tries to load textures from a relative path definition.

This will lead to URLs like https://threejs.org/editor/uv_grid_opengl.jpg.The following archive can be used for reproduction: Archiv.zip

[mrdoob]

When importing obj and mtl, you need zip.

No you don't... 🤔

[Mugen87]

No you don't... 🤔

AFAICS, it is indeed required in the editor to have the OBJ and MTL file bundled in a single archive. The files also need specific names. When inspecting the code, MTLLoader is only used here:

three.js/editor/js/Loader.js

Lines 612 to 618 in 352a325

	if ( zip.files[ 'model.obj' ] && zip.files[ 'materials.mtl' ] ) {
	var materials = new MTLLoader().parse( zip.file( 'materials.mtl' ).asText() );
	var object = new OBJLoader().setMaterials( materials ).parse( zip.file( 'model.obj' ).asText() );
	editor.execute( new AddObjectCommand( editor, object ) );
	}

[johnmarinelli]

i did some digging, could it be that the function that we are using from ui.three.js to load the file (UI.Texture#loadFile) doesn't support .zip? see here:

three.js/editor/js/libs/ui.three.js

Line 56 in c5560e5

function loadFile( file ) {

this function defines only the following cases for filetype

three.js/editor/js/libs/ui.three.js

Line 61 in c5560e5

if ( extension === 'hdr' ) {

three.js/editor/js/libs/ui.three.js

Line 83 in c5560e5

} else if ( extension === 'tga' ) {

three.js/editor/js/libs/ui.three.js

Line 100 in c5560e5

} else if ( file.type.match( 'image.*' ) ) {

i could be wrong. is the event supposed to bubble up to the editor's loadFile somehow?

[Mugen87]

I'm afraid ui.three.js is unrelated to this topic. I suggest you study the implementation of Loader.js where MTLLoader and OBJLoader are actually used.

[qizs]

When importing obj and mtl, you need zip.

No you don't... 🤔

It is very clear about loading OBJ+MTL in the example https://threejs.org/examples/#webgl_loader_obj_mtl.
But when I try to load OBJ+MTL in Three.js Editor, it seems only OBJ is loaded but no MTL.

Thus is it possible to load OBJ+MTL in Three.js Editor?

[Mugen87]

Thus is it possible to load OBJ+MTL in Three.js Editor?

Yes but only when you create a zip archive and name the files correctly (model.obj and materials.mtl)

[kylemcdonald]

When I tried importing the .obj and .mtl files into the editor either separately or at the same time, the .mtl was not applied. When I created a zip file and imported the zip file, the .mtl was applied correctly.

[thadk]

@kylemcdonald Did you mean that you didn't experience the problem observed above with the texture map after fixing your materials.mtl in the zip file?
e.g.
Just checking because I seemed to have the same experience as the original poster.

Note: the jpg texture map which had been in the zip file alongside the materials.mtl loads fine when uploaded one-by-one clicking on the box near that error:

And a "File->Export OBJ" then embeds everything into one large OBJ, so it's a bit hard to know how to modify the originals to make them work.

[Mugen87]

Just checking because I seemed to have the same experience as the original poster.

Using a zip archive like described above makes it possible to load an OBJ with an accompanying MTL file. However, textures are not supported since MTLLoader is going to take the texture name and append it to the editor's URL path (e.g. https://threejs.org/editor/). This is not yet fixed.

[GitHubDragonFly]

The following code modifications might help resolve this issue without requiring a special naming.
The zip file should have OBJ + MTL + required textures (regardless of the folder structure inside the zip file).
I tested it locally and it appears to be working fine for BMP / JPG / PNG / GIF / SVG / TGA textures, even with re-zipped file from #25694.

There is also a support for opening DAE (Collada) zipped files.

	async function handleZIP( contents ) {

		let obj_file = null, mtl_file = null;
		let mime_type = 'image/';
		let filename = 'model';
		let obj_textures = {};

		let zip = unzipSync( new Uint8Array( contents ) );

		// Poly

		Object.keys( zip ).forEach( key => {

			let key_lc = key.toLowerCase();

			if ( key_lc.endsWith( '.obj' ) ) {

				filename = key;
				obj_file = zip[ key ];

			} else if ( key_lc.endsWith( '.mtl' ) ) {

				mtl_file = zip[ key ];

			} else {

				let ext = key_lc.substring( key_lc.lastIndexOf( '.' ) + 1 );

				switch ( ext ) {

					case 'png':

						mime_type += 'png';

						break;

					case 'jpg':
					case 'pjp':
					case 'jpeg':
					case 'jfif':
					case 'pjpeg':

						mime_type += 'jpeg';

						break;

					case 'bmp':
					case 'dib':

						mime_type += 'bmp';

						break;

					case 'gif':

						mime_type += 'gif';

						break;

					case 'svg':

						mime_type += 'svg+xml';

						break;

					case 'webp':

						mime_type += 'webp';

						break;

					default:

						break;
				}

				// handle TGA separately
				if ( ext === 'tga' ) {

					let tga_loader = new TGALoader();

					let tga_texture = tga_loader.parse( zip[ key ].buffer );

					// convert TGA to PNG
					let canvas = document.createElement( 'canvas' );
					let ctx = canvas.getContext( '2d' );
					canvas.width = tga_texture.width;
					canvas.height = tga_texture.height;

					let imgData = new ImageData( new Uint8ClampedArray( tga_texture.data ), tga_texture.width, tga_texture.height );

					ctx.putImageData( imgData, 0, 0 );

					obj_textures[ key ] = canvas.toDataURL( 'image/png', 1 );

				} else {

					let blob = new Blob( [ zip[ key ].buffer ], { type: mime_type } );
					obj_textures[ key ] = URL.createObjectURL( blob );
					URL.revokeObjectURL( blob );

				}

			}

		});

		if ( obj_file !== null && mtl_file !== null ) {

			const { MTLLoader } = await import( 'three/addons/loaders/MTLLoader.js' );
			const { OBJLoader } = await import( 'three/addons/loaders/OBJLoader.js' );

			let materials = new MTLLoader().parse( strFromU8( mtl_file ) );

			if ( Object.entries( obj_textures ).length !== 0 ) {

				for ( const [ key, value ] of Object.entries( materials.materialsInfo ) ) {

					Object.keys( obj_textures ).forEach( textureKey => {
	
						if ( value.bump && textureKey.endsWith( value.bump.indexOf( '/' ) > -1 ? value.bump.substring( value.bump.lastIndexOf( '/' ) + 1 ) : value.bump ) ) value.bump = obj_textures[ textureKey ];
						if ( value.norm && textureKey.endsWith( value.norm.indexOf( '/' ) > -1 ? value.norm.substring( value.norm.lastIndexOf( '/' ) + 1 ) : value.norm ) ) value.norm = obj_textures[ textureKey ];
						if ( value.map_d && textureKey.endsWith( value.map_d.indexOf( '/' ) > -1 ? value.map_d.substring( value.map_d.lastIndexOf( '/' ) + 1 ) : value.map_d ) ) value.map_d = obj_textures[ textureKey ];
						if ( value.map_ka && textureKey.endsWith( value.map_ka.indexOf( '/' ) > -1 ? value.map_ka.substring( value.map_ka.lastIndexOf( '/' ) + 1 ) : value.map_ka ) ) value.map_ka = obj_textures[ textureKey ];
						if ( value.map_kd && textureKey.endsWith( value.map_kd.indexOf( '/' ) > -1 ? value.map_kd.substring( value.map_kd.lastIndexOf( '/' ) + 1 ) : value.map_kd ) ) value.map_kd = obj_textures[ textureKey ];
						if ( value.map_ke && textureKey.endsWith( value.map_ke.indexOf( '/' ) > -1 ? value.map_ke.substring( value.map_ke.lastIndexOf( '/' ) + 1 ) : value.map_ke ) ) value.map_ke = obj_textures[ textureKey ];
						if ( value.map_ks && textureKey.endsWith( value.map_ks.indexOf( '/' ) > -1 ? value.map_ks.substring( value.map_ks.lastIndexOf( '/' ) + 1 ) : value.map_ks ) ) value.map_ks = obj_textures[ textureKey ];
						if ( value.map_bump && textureKey.endsWith( value.map_bump.indexOf( '/' ) > -1 ? value.map_bump.substring( value.map_bump.lastIndexOf( '/' ) + 1 ) : value.map_bump ) ) value.map_bump = obj_textures[ textureKey ];
		
					});
	
				}
	
			}

			let object = new OBJLoader().setMaterials( materials ).parse( strFromU8( obj_file ) );
			object.name = filename;

			editor.execute( new AddObjectCommand( editor, object ) );

		} else {

			for ( const path in zip ) {

				const file = zip[ path ];
	
				const manager = new THREE.LoadingManager();
				manager.setURLModifier( function ( url ) {
	
					const file = zip[ url ];
	
					if ( file ) {
	
						console.log( 'Loading', url );
	
						const blob = new Blob( [ file.buffer ], { type: 'application/octet-stream' } );
						return URL.createObjectURL( blob );
	
					}
	
					return url;
	
				} );
	
				const extension = path.split( '.' ).pop().toLowerCase();
	
				switch ( extension ) {
	
					case 'dae':
	
					{
	
						const { ColladaLoader } = await import( 'three/addons/loaders/ColladaLoader.js' );
	
						const loader = new ColladaLoader( manager );
						const collada = loader.parse( strFromU8( file.buffer ) );
	
						editor.execute( new AddObjectCommand( editor, collada.scene ) );
	
						break;
	
					}
	
					case 'fbx':
	
					{
	
						const { FBXLoader } = await import( 'three/addons/loaders/FBXLoader.js' );
	
						const loader = new FBXLoader( manager );
						const object = loader.parse( file.buffer );
	
						editor.execute( new AddObjectCommand( editor, object ) );
	
						break;
	
					}
	
					case 'glb':
	
					{
	
						const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
						const { GLTFLoader } = await import( 'three/addons/loaders/GLTFLoader.js' );
	
						const dracoLoader = new DRACOLoader();
						dracoLoader.setDecoderPath( '../examples/jsm/libs/draco/gltf/' );
	
						const loader = new GLTFLoader();
						loader.setDRACOLoader( dracoLoader );
	
						loader.parse( file.buffer, '', function ( result ) {
	
							const scene = result.scene;
	
							scene.animations.push( ...result.animations );
							editor.execute( new AddObjectCommand( editor, scene ) );
	
							dracoLoader.dispose();
	
						} );
	
						break;
	
					}
	
					case 'gltf':
	
					{
	
						const { DRACOLoader } = await import( 'three/addons/loaders/DRACOLoader.js' );
						const { GLTFLoader } = await import( 'three/addons/loaders/GLTFLoader.js' );
	
						const dracoLoader = new DRACOLoader();
						dracoLoader.setDecoderPath( '../examples/jsm/libs/draco/gltf/' );
	
						const loader = new GLTFLoader( manager );
						loader.setDRACOLoader( dracoLoader );
						loader.parse( strFromU8( file ), '', function ( result ) {
	
							const scene = result.scene;
	
							scene.animations.push( ...result.animations );
							editor.execute( new AddObjectCommand( editor, scene ) );
	
							dracoLoader.dispose();
	
						} );
	
						break;
	
					}
	
				}
	
			}
	
		}

	}