# Using GLB with textures on node

**URL:** <https://discourse.threejs.org/t/using-glb-with-textures-on-node/16854>\
**Category:** Questions\
**Tags:** node-js, gltf\
**Created:** [July 7, 2020, 10:58am UTC](https://discourse.threejs.org/t/using-glb-with-textures-on-node/16854 "2020-07-07T10:58:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![muhmundr](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@muhmundr](https://discourse.threejs.org/u/muhmundr)\
**Post date:** [July 7, 2020, 10:58am UTC](https://discourse.threejs.org/t/using-glb-with-textures-on-node/16854/1 "2020-07-07T10:58:10Z")

</div>

I need to load .glb or .gltf files on node. I’ve read all related topics here, but seems that there is no good answer. I have a glb file that should be processed by node, then attached to another code generated 3d-object and then send to client for rendering. Anybody has a working solution?

I thought that this will work:

```
const loadGLTFModel = (fileName) => {
  const loader = new THREE.GLTFLoader();
  const data = fs.readFileSync(fileName);
  const buffer = new Buffer.from( data ).toString();
  loader.parse(buffer, './', (gltf) => console.log(gltf));
}

```

But it doesn’t work with glb files at all. And it fails with gltf files as well.

---

<div class="post-metadata">

**Author:** ![muhmundr](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@muhmundr](https://discourse.threejs.org/u/muhmundr)\
**Post date:** [July 8, 2020, 8:46am UTC](https://discourse.threejs.org/t/using-glb-with-textures-on-node/16854/2 "2020-07-08T08:46:56Z")

</div>

For those who are looking for the answer to the question about load GLB models on node.js with three.js  
Here’s a working solution for models WITHOUT textures:

```
const toArrayBuffer = (buf) => {
  const arrayBuffer = new ArrayBuffer(buf.length);
  const view = new Uint8Array(arrayBuffer);
  for (let i = 0; i < buf.length; ++i) {
    view[i] = buf[i];
  }
  return arrayBuffer;
}

const loadGLTFModel = (fileName) => {
  const loader = new THREE.GLTFLoader();
  return new Promise((resolve, reject) => {
    if (fs.existsSync(fileName)) {
      const data = fs.readFileSync(fileName);
      const arrayBuffer = toArrayBuffer(data);
      loader.parse(arrayBuffer, '',
        (object3D) => {
          resolve(object3D);
        },
        (error) => {
          console.log(error);
          reject('Loader failed')
        });
    } else reject(`Cannot find ${fileName}`);
  });
}
```

---

<div class="post-metadata">

**Author:** ![muhmundr](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@muhmundr](https://discourse.threejs.org/u/muhmundr)\
**Post date:** [July 8, 2020, 6:21pm UTC](https://discourse.threejs.org/t/using-glb-with-textures-on-node/16854/3 "2020-07-08T18:21:12Z")

</div>

For using textures from GLB files we can add several browser things to the node.js environment. And modify three.js library little bit.

```
const jsdom = require('jsdom');
const {JSDOM} = jsdom;
const dom = new JSDOM('<!DOCTYPE html><html><body></body></html>');
global.document = dom.window.document;
global.window = dom.window;
global.THREE = THREE;
global.self = global;
global.URL = require('url');
global.Blob = require('cross-blob');

URL.createObjectURL = (blob) => {
  return new Promise(resolve => {
    blob.arrayBuffer().then(buffer => {
      const base64 = new Buffer.from(buffer).toString('base64');
      const completedURI = `data:image/jpeg;base64,` + base64;
      resolve(completedURI);
    });
  })
};
```

---

<div class="post-metadata">

**Author:** ![qiuwch](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/qiuwch/32/13956_2.png) [@qiuwch](https://discourse.threejs.org/u/qiuwch)\
**Post date:** [October 14, 2020, 7:44am UTC](https://discourse.threejs.org/t/using-glb-with-textures-on-node/16854/4 "2020-10-14T07:44:57Z")

</div>

Hi @muhmundr

I tried your code, but it seems the program is stuck and can not finish model loading.

Can you point out to a model that can be loaded with this code? I am wondering what is wrong with my model.

---

<div class="post-metadata">

**Author:** ![muhmundr](https://avatars.discourse-cdn.com/v4/letter/m/4af34b/32.png) [@muhmundr](https://discourse.threejs.org/u/muhmundr)\
**Post date:** [October 18, 2020, 5:39pm UTC](https://discourse.threejs.org/t/using-glb-with-textures-on-node/16854/5 "2020-10-18T17:39:55Z")

</div>

Maybe this can help?

> [@Using GLTFLoader on node](https://discourse.threejs.org/t/using-gltfloader-on-node/2309/7):
>
> Yes, the topic is complex but seems that this is pretty popular topic. I found solution for work with GLB on node.js without textures. It works pretty well. I need only process of the 3d objects without rendering. I think that the only thing that should be solved is the Texture loading. I guess that if redefine the load textures function to the node.js function which will read data and convert it to base64 - it will work like a charm. const toArrayBuffer = (buf) =\> { const arrayBuffer = new …

Actually any model from Sketchfab can be processed on node.js. [Log in to your Sketchfab account - Sketchfab](https://sketchfab.com/feed)

Or you can try with models without textures first. They can be generated here:  
[https://threejs.org/editor/](https://threejs.org/editor/)

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [July 30, 2021, 5:40am UTC](https://discourse.threejs.org/t/using-glb-with-textures-on-node/16854/6 "2021-07-30T05:40:00Z")

</div>

for me this terminates early

```javascript
      console.log(0); // <--- this is logged
      loader.parse(arrayBuffer, '',
        (object3D) => {
          console.log(1); // <--- this is not
          resolve(object3D);
        },
        (error) => {
          console.log(error); // <--- neither is this
          reject('Loader failed')
        });

```

what was your three version ? since r119 was released on Jul 30, 2020 it must have been r118 or earlier - let me try that… nope, same behavior in r118

ok, it seems to be because of [this bit](https://github.com/jsdom/jsdom/issues/1816#issuecomment-310106280).

---

<div class="post-metadata">

**Author:** ![makc3d](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/makc3d/32/10452_2.png) [@makc3d](https://discourse.threejs.org/u/makc3d)\
**Post date:** [July 30, 2021, 2:53pm UTC](https://discourse.threejs.org/t/using-glb-with-textures-on-node/16854/7 "2021-07-30T14:53:39Z")

</div>

In the end, I threw away jsdom and left this instead:

```javascript
const Image = require('canvas').Image;
global.document = {
	createElementNS: (ns, type) => {
		if(type === 'img') {
			const img = new Image();
			img.addEventListener = (type, handler) => {
				img['on' + type] = handler.bind(img);
			};
			img.removeEventListener = (type) => {
				img['on' + type] = null;
			};
			return img;
		}
	}
};

global.URL = require('url');
global.self = { URL };
global.Blob = require('cross-blob');

```