GLTF Loading in THREE.js x REACT not working

Questions
, ,
1

Hello everyone :slight_smile:

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)

  • 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

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");
  }
);
2

try “/public/scene.gltf”

3

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

4

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

5

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
Screen Shot 2020-03-23 at 07.26.571344×702 80.8 KB

6

still shows old code here:
Screen Shot 2020-03-23 at 11.29.31

7

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!

8

so export gltf with everything embedded then.

9

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.