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…

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…

Have you tried including it the same way it’s included in the examples? mrdoob/three.js/blob/34dc2478c684066257e4e39351731a93c6107ef5/examples/webgl_loader_gltf.html#L41 <body> <div id="info"> <a href="http://threejs.org" target="_blank" rel…

you can see here.three in react example: [image] A component for viewing an STL object from a given URL by utilizing Three.js A React component for viewing an STL object from a given URL by utilizing Three.js

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(); }, …

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.mod…

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: thi…

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' }] }, { // h…

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

Questions

DevilAngel4life April 15, 2019, 9:00pm 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.

Topic		Replies	Views
Gltf loader using threejs Questions gltf-loader , react	4	1515	May 12, 2020
There is no gltfloader in three module Questions modules	7	14966	January 31, 2022
Can't load a .glb file with GLTFLoader Questions gltf-loader , react-three-fiber	4	8041	August 2, 2024
Import GLTFLoader in React: SyntaxError: Unexpected token Questions loaders , react	7	2767	April 14, 2023
GLTFLoader was not found in 'three' Questions gltf-loader	1	227	June 26, 2024

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

Related topics