# GLTF Loading in THREE.js x REACT not working

**URL:** <https://discourse.threejs.org/t/gltf-loading-in-three-js-x-react-not-working/13709>\
**Category:** Questions\
**Tags:** react, gltf-loader, textures\
**Created:** [March 22, 2020, 5:21pm UTC](https://discourse.threejs.org/t/gltf-loading-in-three-js-x-react-not-working/13709 "2020-03-22T17:21:42Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![Audreyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/audreyk/32/6334_2.png) [@Audreyk](https://discourse.threejs.org/u/Audreyk)\
**Post date:** [March 22, 2020, 5:21pm UTC](https://discourse.threejs.org/t/gltf-loading-in-three-js-x-react-not-working/13709/1 "2020-03-22T17:21:42Z")

</div>

Hello everyone 🙂

I’m trying to load a GTLF model with three.js, using React, and it’s not working.

- i’m triying to load a GTLF scene that comes with a material (an image in jpg format)

- the GTLF scene is a 3D rock (it’s included in the sandbox) (i couldn’t include the image in sandbox because of its size)

- i’ve been researching this topic and tried out several alternatives but I feel like i’m missing something… here i’ve used the code in three.js website ([three.js docs](https://threejs.org/docs/index.html#examples/en/loaders/GLTFLoader))

- in all the examples I found, I haven’t found a way to import the scene along with its material (in some way, we have to map it on the scene when we import it, right?)

here is the sandbox: [loving-booth-7sltr - CodeSandbox](https://codesandbox.io/s/loving-booth-7sltr)

below is the code (scene.gltf is in my public folder):

//importing stone with GLTFLoader

```
// Instantiate a loader
var loader = new GLTFLoader();

// Load a glTF resource
loader.load(
  // resource URL
  "./scene.gltf",
  // called when the resource is loaded
  function(gltf) {
    this.scene.add(gltf.scene);
  },
  // called while loading is progressing
  function(xhr) {
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  },
  // called when loading has errors
  function(error) {
    console.log("An error happened");
  }
);
```

---

<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:** [March 22, 2020, 5:48pm UTC](https://discourse.threejs.org/t/gltf-loading-in-three-js-x-react-not-working/13709/2 "2020-03-22T17:48:48Z")

</div>

try “/public/scene.gltf”

---

<div class="post-metadata">

**Author:** ![Audreyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/audreyk/32/6334_2.png) [@Audreyk](https://discourse.threejs.org/u/Audreyk)\
**Post date:** [March 22, 2020, 6:45pm UTC](https://discourse.threejs.org/t/gltf-loading-in-three-js-x-react-not-working/13709/3 "2020-03-22T18:45:06Z")

</div>

just tried, not working as well! thanks for your help 🙂

---

<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:** [March 22, 2020, 7:14pm UTC](https://discourse.threejs.org/t/gltf-loading-in-three-js-x-react-not-working/13709/4 "2020-03-22T19:14:45Z")

</div>

> [@Audreyk](#):
>
> not working as well

Ah, right, you did not upload bin file and texture

---

<div class="post-metadata">

**Author:** ![Audreyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/audreyk/32/6334_2.png) [@Audreyk](https://discourse.threejs.org/u/Audreyk)\
**Post date:** [March 23, 2020, 6:30am UTC](https://discourse.threejs.org/t/gltf-loading-in-three-js-x-react-not-working/13709/5 "2020-03-23T06:30:44Z")

</div>

ahh thanks! I just updated the code but it still doesn’t work… I’m not sure i’m importing everything correctly…

- I made a folder called “stone” in my public folder and put in there the scene.gltf, the texture, and the bin file (I couldn’t uncompress the bin file - is this normal?)

thanks a lot!

```
var loader = new GLTFLoader().setPath("./stone/");
loader.setResourcePath("./stone/");

loader.load(
  "scene.gltf",
  function(gltf) {
    const modelObj = gltf.scene;
    modelObj.position.y = 10;
    modelObj.position.x = 5;

    this.scene.add(modelObj);

    console.log("modelObj", modelObj);
    console.log("gltf.scene", gltf.scene);
  },
  // called while loading is progressing
  function(xhr) {
    console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
  },
  // called when loading has errors
  function(error) {
    console.log(error);
  }
);

```

i get these errors on the console:

 ![Screen Shot 2020-03-23 at 07.26.57](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/61976622d2f4871c26977197fc89c2b4d76b768c.png)

---

<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:** [March 23, 2020, 10:31am UTC](https://discourse.threejs.org/t/gltf-loading-in-three-js-x-react-not-working/13709/6 "2020-03-23T10:31:14Z")

</div>

> [@Audreyk](#):
>
> I made a folder called “stone” in my public folder and put in there the scene.gltf, the texture, and the bin file

still shows old code here:  
 ![Screen Shot 2020-03-23 at 11.29.31](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/623442c2a5c13097dc25bea100b8a0b486b72754.png)

---

<div class="post-metadata">

**Author:** ![Audreyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/audreyk/32/6334_2.png) [@Audreyk](https://discourse.threejs.org/u/Audreyk)\
**Post date:** [March 23, 2020, 5:03pm UTC](https://discourse.threejs.org/t/gltf-loading-in-three-js-x-react-not-working/13709/7 "2020-03-23T17:03:05Z")

</div>

hey! i just uploaded the sandbox! i still can’t figure out what the problem is…  
(i just added the gltf file in the stone folder in sandbox because sandbox won’t allow me to upload the texture and bin file!)

thanks a lot!

---

<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:** [March 23, 2020, 6:19pm UTC](https://discourse.threejs.org/t/gltf-loading-in-three-js-x-react-not-working/13709/8 "2020-03-23T18:19:42Z")

</div>

> [@Audreyk](#):
>
> sandbox won’t allow me to upload the texture and bin file

so export gltf with everything embedded then.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [March 24, 2020, 12:41pm UTC](https://discourse.threejs.org/t/gltf-loading-in-three-js-x-react-not-working/13709/9 "2020-03-24T12:41:17Z")

</div>

do: npx gltf-pipeline -i scene.gltf -i scene.glb

that will create one single glb with all textures inclued. upload this into the public folder.

also: new GLTFLoader().load("/scene.glb", gltf =\>

you then don’t need to set a path.

some other things that you need to know when you work with codesandbox: switch off loop protection (create a sandbox config file for that), otherwise you won’t be able to load bigger models. you will also not be able to use draco, because threejs/examples/jsm is not compatible with commonjs environments (which csb is). that the gltfloader works is a happy accident.