How to get material.map.image.src of a loaded model?

Questions
, ,
1 
loader.setPath( directory );
	loader.load( filename+ext, function (obj) {
		if(obj.hasOwnProperty('scene')) importModel.bufferObject = obj.scene;
		else importModel.bufferObject = obj;
		
		//get all the textures that the imported model uses
		importModel.uniqueImages = [];
		importModel.bufferObject.traverse( function(child) {
			if (child instanceof THREE.Mesh) {
	console.log(child.material.map.image.src);    //<-- this outputs 'undefined'
				try{ if(importModel.uniqueImages.indexOf(child.material.map.image.src) == -1) importModel.uniqueImages.push(child.material.map.image.src); }catch{}
			}
		});
		
		//create the textures in our format
		importModel.uniqueImages = importModel.uniqueImages.filter(e => e != null);
		if(importModel.uniqueImages.length > 0) importModel.convertImages();
		else importModel.convertBufferObject();
	},function (obj) {},function (error) {
		error = String(error).replace("THREE.","");
		alert(error);
	});

I am trying to retrieve the image.src of the texture when loading a model, however I can’t seem to find it… In older versions of gltfloader it worked just fine, but now it doesn’t… Where can I find the embedded image.src used for the models?

2

If you use

console.log(child.material.map)

You could expand this property in console and find the relative path you’re looking for…

3

yes, I have done that… I am looking for this:

child.material.map.image.src

but it is undefined.

To get it to be defined I have to add:

delete window.createImageBitmap;

to my code, but why?

4

When I don’t use the…

delete window.createImageBitmap;

It becomes an imagebitmap…
Is there a way to get the image data from that? or to convert it to a regular image?

5

What are you trying to do with access to the texture? Can you not just dispose of the maps texture property all together and assign your custom texture?

6

I have images that my program uses, and I need to compare the textures that loaded models have to see if they match any of the images in my program… I also operate on the images, and use the images to determine how to work with the models… I’m actually not using the imported models, I’m just using the importer to get the data of the geometry and images and then constructing my own objects based on my custom parameters and data combined with the imported stuff… So I need to be able to look at the image.src and compare pixel data and that sort of thing…

7

Seems as though I can do this:

            if(typeof child.material.map.image.src !== 'undefined'){
  				imageSrc = child.material.map.image.src;
  			}else{
  				
  				let img = child.material.map.image;
  				let canvas = document.createElement('canvas');
  				canvas.width = img.width;
  				canvas.height = img.height;
  				
  				let ctx = canvas.getContext('bitmaprenderer');
  				if(ctx) {
  					ctx.transferFromImageBitmap(img);
  				}
  				else {
  					canvas.getContext('2d').drawImage(img,0,0);
  				}
  				imageSrc = canvas.toDataURL();
  				canvas = null;
  				ctx = null;
  			}

This will allows me to get the data without having to edit the modules or delete the createImageBitmap.