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

Questions
#1

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.

#2

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
#3

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.

#4

you can see here.three in react example:

#5

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.

#6

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);
        }
    )
#7

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);
    });
#9

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:

1 Like
#10

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);
});
#11

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.

#12

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
#13

you can try this: https://twitter.com/0xca0a/status/1172183080452464640

this will create a real component out of the gltf which imo is a major relief as you can now declaratively alter the jsx, tie nodes to redux/animations/gestures etc

react-three-fiber is just a reconciler, it directly translates to threejs, so there are no limitation as to what it can do. it isn’t even tied to a specific three version or ships any kind of special logic that has to be maintained or kept up to date. it would work with threejs 1 as well as the very latest.

#14

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

I was also getting the same error as above when using create-react-app and the GLTFLoader. As mentioned above, putting the assets in the public folder and then using loader.load(‘path from public to your gltf’); and adding gltf, bin to the url-loader test in the webpack config after doing yarn eject resolved my issue. The error above is due to the loader making a request to find the gltf/bin, but since it can’t find it, it’ll try to load it from the index.html file that is served. Since that file is HTML, it tries to parse < which isn’t JSON and throws the error. I assume the error is the same for the threejs example loader or three-gltf-loader, because I got the error using both.

#15

Hello, I am trying to load an STL file into my React app but could not figure out how to do so with the above responses. I have created my app with create-react-app. I also could not find a webpack config file. I have imported the NPM three and three-stl-loader.

I am suspecting the url I am using is not accessing my stl file. Does anyone know how I can access the STL file? I have place file “box.stl” in the public folder and the same folder as my component to atleast get it to show but still no results. Does anyone have an idea how to get my stl file to show?

import React, { Component } from "react";
import * as THREE from "three";
var STLLoader = require("three-stl-loader")(THREE);
var OrbitControls = require("three-orbit-controls")(THREE);

class ThreeDViewer extends Component {
  componentDidMount() {
    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1,
      1000);
    var renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    new OrbitControls(camera, renderer.domElement);
    this.mount.appendChild(renderer.domElement);

    var loader = new STLLoader();
    loader.load("./box.stl", geometry => {
      geometry.center();
      var material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      var mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
    });

    camera.position.z = 5;
    var animate = function() {
      requestAnimationFrame(animate);
      renderer.render(scene, camera);
    };
    animate();
  }

  render() {
    return <div ref={ref => (this.mount = ref)} />;
  }
}
export default ThreeDViewer;