Unable to load GLTF file from a local directory with GLTFLoader in a React application. It loads correctly from external URLs

Question

Edit: Replacing "gltf-webpack-loader" with "url-loader" in webpack.config.js seems to fix the problem.

I'm trying to render a 3d model in a React app with Three.js, however I am

having issues loading the GLTF file from a local directory. When I try to load the GLTF file with GLTF Loader, I get a 404 (Not Found) error. It does work correctly when I load the GLTF file from an external url.

The GLTF file itself works. I tested it in a separate non-react project (just an html file) where the GLTF file was loaded with GLTFLoader and served by a local server.

In the separate non-react project, THREE.js and GLTFLoader are loaded from

  <script src="https://unpkg.com/[email protected]/build/three.min.js"></script>
  <script src="https://unpkg.com/[email protected]/examples/js/loaders/GLTFLoader.js"></script>

whereas in the React project, they are loaded from npm modules: "three" and "three-gltf-loader".

Below is the code in my project related to loading the GLTF file.

import * as THREE from 'three';
import GLTFLoader from 'three-gltf-loader';
import Car from './models/Low-Poly-Racing-Car.gltf';

...

loader.load(
    Car,
    (gltf) => {
        this.customLayer.scene.add(gltf.scene);
    }, null, (err) => {
        console.log(err);
    }
);

...

Again, this results in a 404 error for local files, but an external link like https://docs.mapbox.com/mapbox-gl-js/assets/34M_17/34M_17.gltf works perfectly fine.

This is with webpack version 1.15.0. I have tried it with and without modifying webpack.config.json. The modification to webpack.config.json I tried was adding

      {
        test: /\.(gltf)$/,
        loader: "gltf-webpack-loader"
      },
      {
        test: /\.(bin)$/,
        loader: 'file-loader'
      }

to the loaders array. This allows

import Car from './models/Low-Poly-Racing-Car.gltf';

to work.

For the path argument to GLTFLoader, I tried using the variable called Car as seen above, and also strings containing relative paths to different directories I tried:

"../../../images/models/Low-Poly-Racing-Car.gltf"
"./models/Low-Poly-Racing-Car.gltf"
"../../../public/models/Low-Poly-Racing-Car.gltf"
"../../../public/models/Low-Poly-Racing-Car.gltf"

When I import from the above directories into the variable called Car, I get the value:

"/in-memorye5d217e7245bef6f258a6f535019c43e.gltf"

Any help with loading GLTF files locally into this React project would be much appreciated!

Answer 1

If you load models or textures from external files, due to browsers' same origin policy security restrictions, loading from a file system will fail with a security exception.

View the docs at:
https://threejs.org/docs/#manual/en/introduction/How-to-run-things-locally

Answer 2

put your models in the public folder and write the path to the model */public/models.gltf*.

Answer 3

Good afternoon maybe this download method will help you

import * as THREE from 'three'
import React, { useRef } from 'react'
import { useLoader } from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import urlAzs from '../../../../static/3d/azs.glb'
import urlTextureAzs from '../../../../static/img/flakes.png'

export default function Model ({
  activeRoom,
  setActiveRoom,
  heightRoom,
  deltaHeightRoom,
  ...props
}) {
  const texture = useLoader(THREE.TextureLoader, urlTextureAzs)
  const { nodes, materials } = useLoader(GLTFLoader, urlAzs)