\
**Category:** Questions\
**Tags:** canvas-texture, gltf-loader, loaders, textures, materials, gltf\
**Created:** [September 19, 2022, 12:58pm UTC](https://discourse.threejs.org/t/extract-texture-and-show-in-html-view-from-glb-model/42687 "2022-09-19T12:58:27Z")\
**Posts on this page:** 3\
**Page:** 1
**Author:**  [@tech](https://discourse.threejs.org/u/tech)\
**Post date:** [September 19, 2022, 12:58pm UTC](https://discourse.threejs.org/t/extract-texture-and-show-in-html-view-from-glb-model/42687/1 "2022-09-19T12:58:27Z")
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
---
**Author:**  [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [September 21, 2022, 10:00pm UTC](https://discourse.threejs.org/t/extract-texture-and-show-in-html-view-from-glb-model/42687/2 "2022-09-21T22:00:33Z")
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 `![]()
` 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.
```javascript
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 `![]()
` tag normally, e.g.
```javascript
const img = document.createElement('img');
img.src = await previewCompressedTexture(texture);
```
---
**Author:**  [@tech](https://discourse.threejs.org/u/tech)\
**Post date:** [September 22, 2022, 9:28am UTC](https://discourse.threejs.org/t/extract-texture-and-show-in-html-view-from-glb-model/42687/3 "2022-09-22T09:28:20Z")
Hi @donmccurdy
Thanks for your help i will try and get back on this.
Thank you