JSON (or GLTF) Loader for Three.js in React

I am attempting to load gltf files into three.js in a react application. Has anyone found out a way to get this to work? I haven’t been able to get either three-gltf-loader or three-gltf2-loader to work. Or does anyone know how to include the GLTF Loader from the site into a react application. I’ve been trying to google a solution all day and haven’t managed to get it to work.

I haven’t been able to get either three-gltf-loader or three-gltf2-loader to work.

Don’t use versions of the loaders that you find on NPM, they are pretty much always out of date. Use the version of the loader from here. You can’t use it directly as a module, you’ll have to convert it yourself or use one of the solutions from this thread, which has lots of ideas for using the examples as modules with webpack.

1 Like

Have you tried including it the same way it’s included in the examples?

Don’t use versions of the loaders that you find on NPM, they are pretty much always out of date.

I would also take this advice with a grain of salt. Three.js doesn’t really have a “stable” version like some other libraries do.

87 may be no more or no less stable than 92. If you take an arbitrary class for example, you may find that it hasn’t changed from a previous version, or several prior.

“Out of date” is a fairly relative term. Sure it may be out of date, but compared to something thats possibly even more broken.

Not to mention that NPM can host infinitely many modules, there’s nothing to say that there isn’t a module out ther that works better than the “real thing”.

Perhaps @looeee is referring to some specific modules that he has detailed knowledge of, and not just npm modules in general, in which case it would be useful to clarify that.

you can see here.three in react example:

Hey, did you get a solution for this problem?
I’ve been trying to load gltf files into a react application using three.js, but it doesn’t work. The files work fine outside react.js. It would be really helpful to have some solution.

Yes. ‘three-gltf-loader’ npm package works for me just fine.

import GLTFLoader from 'three-gltf-loader';

init = () => {
...
    this.gltfLoader = new GLTFLoader();
}

Then you can load with:

    this.gltfLoader.load(
            url,
        async (object) => {
            resolve();
        },
         null,
        (error) => {
            console.log(error);
            reject(error);
        }
    )

Thank you for the lead! But the following error shows on using this snippet:

SyntaxError: Unexpected token < in JSON at position 0
        at Object.parse (<anonymous>)
        at GLTFLoader.parse (index.js:100)
        at Object.onLoad (index.js:52)
        at XMLHttpRequest.<anonymous> (three.module.js:23564)

Here is my code:

import * as THREE from 'three'
import GLTFLoader from 'three-gltf-loader'

this.loader = new GLTFLoader();
    this.loader.load('../data/box.gltf', 
    (gltf) => {
      const model = gltf.scene;
      this.scene.add(model);
    });

You’ve probably fixed this but, you need to put your .gltf assets into the Public folder, Webpack doesn’t resolve relative paths like this:

this.loader.load('../data/box.gltf',

https://facebook.github.io/create-react-app/docs/using-the-public-folder :v:

I found that this was the problem. I used the gltf-webpack-loader npm package to import the path into my React component and then used that path in my loader. It requires a bit of tinkering with the webpack configuration file.

import gltfPath from '../path/to/file.gltf'

Then use it like this:

this.loader.load(gltfPath,
 (gltf) => {
this.scene.add(gltf.scene);
});

I been having the same problem. I followed the example of the gltf-webpack-loader and i still can’t load the Gltf file. What exactly did you have to do to your webpack config? Thanks.

I add this to the rules inside the webpack configuration file.

 // GLTF configuration: add this to rules
            {
              // match all .gltf files
              test: /\.(gltf)$/,
              use: [{loader: 'gltf-webpack-loader'
              }]     
        },
        {
          // here I match only IMAGE and BIN files under the gltf folder
          test: /gltf.*\.(bin|png|jpe?g|gif)$/,
          // or use url-loader if you would like to embed images in the source gltf
          loader: 'file-loader',
          options: {
            // output folder for bin and image files, configure as needed
            name: 'gltf/[name].[hash:7].[ext]'
          }
        },
        // end GLTF configuration