Unable to load .glb model file into React with GLTFLoader (bad URL 404)

Hello, I’m trying to load a .glb file (simple spherical shape) into a component of my React app, but I get a 404 in the console when its tried to load. Things i’ve tried:

a. Loaded another model successfully with a URL
b. Tried both glb and gltf formats
c. Put in public folder, put in src folder, tried with many filepaths “/sphere.glb” , “/sphere.glb”
d. Loaded the model into a webviewer to make sure it works

Here is the code

loader.load(“/sphere.glb”, function ( gltf ) {

scene.add( gltf.scene );

}, undefined, function ( error ) {

console.error( error );

} );

you need to show more code showing how you declared your loader.

Anyway, here are 2 working R3F examples using different techniques

useLoader with GLTFLoader

Ahh, thank you will look at those. They seem to both use web urls for the models, my problem is that I’m trying to use a local file so my app can work offline

Here is my code

import {useEffect} from ‘react’;
import * as THREE from “three”;
import { GLTFLoader } from ‘three/examples/jsm/loaders/GLTFLoader.js’;

export default function Page({ children } : { children: any }) {

useEffect(() => {

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
    window.innerWidth / window.innerHeight,

camera.position.z = 96;

const canvas: any = document.getElementById('threeCanvas');

const renderer = new THREE.WebGLRenderer({
antialias: true,

renderer.setSize(window.innerWidth / 3, window.innerHeight / 3);


const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
ambientLight.castShadow = true;

const loader = new GLTFLoader();

loader.load("/sphere.gltf", gltf => {

    scene.add( gltf.scene );

}, undefined, function ( error ) {

    console.error( error );

} );

const animate= () => {
    renderer.render(scene, camera);

}, []); 

return (

//returning element with id: threeCanvas

Doh, of course. I ran out of space on codesandbox so I updated to use jsdeliver links now.
See my screen grab of the same glTFLoader example but loading a local file.
The monkey.glb is placed in my ./public/models/ folder.
And is referenced in the code using ./models/monkey.glb. This works.

Re: your code, sorry, I don’t know how to use React like the way you are showing it. If you are using React, then I would use React Three Fiber since it is full of good resources.
If I was doing it your way, i.e., mixing vanilla and React, then I wouldn’t use React.
I would do it this way. GLTF Model Loader. Press the <> for JavaScript source.

Maybe look more closely at your 404 error and see what path your browser is trying to download your sphere.gltf from.

Ahhh, thank you for your responses. Were you able to update those links? I tried them again and they are still codesandbox.

I haven’t had any luck yet but I’ll keep trying – the GET request looks like this, here I tried to put it into a folder called images.

so your browser is asking for ./images/sphere.glb
so put sphere.glb into wherever on your server, is the images folder that your webserver is apparently serving.

Thanks again for all the help

I don’t know what is wrong with your code, webserver or project setup.
In fact, I am unable to reproduce your error.
I won’t be updating my codesandbox examples to load models from the ./public/models/ folder.
But, if you want a working example of Three.js, in React, that runs locally and loads a locally hosted model,
then follow these commands exactly.

git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout glTFLoader
npm install
npm start

My problem was that I had not configured webpack properly with electron-forge to provide the file to the renderer process.


test: /.(gltf)$/i,
use: [
loader: ‘file-loader’