Extract Texture and Show in HTML View from GLB model

Questions
, , , , ,
1

Hi there,

I have glb models loaded from server and i want to display each model textures into html image view or scroller view in canvas, I am able to find the texture map of each models but not able to extract that to image view.

Here what i have tried so far

this.loader.load(propURL, (gltf) => {
gltf.scene.name = “Prop”;
const s = this;
s.scene.add(gltf.scene)
for (var i in gltf.scene.children) {
var mesh = gltf.scene.children[i]
mesh.position.set(0, -this.charPos, 0)
mesh.scale.set(5, 5, 5)

  }

this.prop = this.faceModel.getObjectByName(‘Prop’);
for (let k = 0; k < this.face.children.length; k++) {
let group = this.face.children[k].children;
for (let i = 0; i < group.length; i++) {
this.selectedimage = group[i].material.map
}
}
});

I m getting the model material map but not able to extract texture from it

Thanks in Advance

2

If you have only a reference to the THREE.Texture (e.g. from material.map) then rendering it in HTML is a little complicated. Assuming that you intend to do this for many textures, I think your process would be to (1) create a renderer, (2) render each texture individually to that renderer, (3) after each texture is rendered, save the output of the canvas, (4) display the output in <img> tags on the page. This would be simpler with access to the original image data, but with just a THREE.Texture you might have Object URLs or other resources that are not accessible after loading, so we’ll do it this way.

Here’s example code to get an Object URL for a THREE.CompressedTexture — I think the same thing should work for THREE.Texture, with slight adjustments for how you access the width and height of the texture.

const renderer = new WebGLRenderer({alpha: true});
renderer.setSize(256, 256);
renderer.outputEncoding = sRGBEncoding;

const scene = new Scene();
const mesh = new Mesh(new PlaneBufferGeometry(1, 1, 1, 1), new MeshBasicMaterial({color: 0xffffff}));
const camera = new OrthographicCamera(-.5, .5, .5, -.5, -1, 1);
camera.position.set(0, 0, -1);
scene.add(mesh, camera);

export async function previewCompressedTexture(texture) {
	const {width, height} = texture.mipmaps[0];
	mesh.scale.x = height > width ? width / height : 1;
	mesh.scale.y = width > height ? height / width : 1;

	texture.encoding = sRGBEncoding;
	texture.wrapS = texture.wrapT = RepeatWrapping;
	texture.repeat.y = -1;
	mesh.material.map = texture;

	renderer.render(scene, camera);

	return new Promise((resolve) => {
		renderer.domElement.toBlob((blob) => resolve(URL.createObjectURL(blob)), 'image/png');
	});
}

Once you have the URL you can use it on an <img> tag normally, e.g.

const img = document.createElement('img');
img.src = await previewCompressedTexture(texture);
3

Hi @donmccurdy

Thanks for your help i will try and get back on this.

Thank you