Obj + Mtl files from zip file

Questions
1

Hi, I’m trying to load *.obj + *.mtl files from zip archive.

var unzippedData = new JSZip( zippedData );
var materials = new THREE.MTLLoader().parse( unzippedData.file( 'materials.mtl' ).asText() );
var object = new THREE.OBJLoader().setMaterials( materials ).parse( unzippedData.file( 'model.obj' ).asText() );

It’s kind of working, but having a problem with resolving img textures from MTLLoader, it’s trying to load them as there are files in file system (so, i’'m getting 404).

How can I force to load img from unzippedData?

EDIT
So, my solution is like this:

const unzippedData = new JSZip( zippedData );
const loadingManager = new THREE.LoadingManager();
loadingManager.setURLModifier(url => {
	const buffer = unzippedData.files[url].asUint8Array();
	const blob = new Blob( [ buffer.buffer ] );
	const NewUrl = URL.createObjectURL( blob );

	return NewUrl
});

const mtlLoader = new THREE.MTLLoader(loadingManager);
const materials = mtlLoader.parse( unzippedData.file( 'materials.mtl' ).asText() );
const object = new THREE.OBJLoader().setMaterials( materials ).parse( unzippedData.file( 'model.obj' ).asText() );
2

You’ll need to use LoadingManager.setURLModifier .

It’s been a while since I used this on a zip file, but essentially you’ll need to do something like this:

// given image data extracted from zip file
const extractedImage = XXXX;

// create a blob URL of the image
const buffer = new Uint8Array( extractedImage );
const blob = new Blob( [ buffer.buffer ] );
const url = URL.createObjectURL( blob );

// then create a library of extracted images
images[ extractedImageFilename ] = url;

// finally use LoadingManager.setURLModifier#

LoadingManager.setURLModifier = ( url ) => {

   // check if the URL is an image, then check if the image is in your library
   /// and return the extracted image if it is

}
1 Like
3

Tnx a lot, this code worked perfectly for me:

const unzippedData = new JSZip( zippedData );
const loadingManager = new THREE.LoadingManager();
loadingManager.setURLModifier(url => {
	const buffer = unzippedData.files[url].asUint8Array();
	const blob = new Blob( [ buffer.buffer ] );
	const NewUrl = URL.createObjectURL( blob );

	return NewUrl
});

const mtlLoader = new THREE.MTLLoader(loadingManager);
const materials = mtlLoader.parse( unzippedData.file( 'materials.mtl' ).asText() );
const object = new THREE.OBJLoader().setMaterials( materials ).parse( unzippedData.file( 'model.obj' ).asText() );
1 Like
4

Hello,

I am using same code but it could not load material file.