Cannot load .gltf file to use iwith Three.js in my react website

Question

I have the .gltf file of my 3D model in the public folder of my project, I then used "npx gltfjsx filename" command to generate a .js React component from the .gltf file. In that .js file I have the line:

const { nodes, materials } = useGLTF('C:/Users/jaime/Desktop/NFS-site/public/FSFenix_Render.gltf')

The error I am having is that the response of the HTTP request for the file is a HTML and not the .gltf file. The error shows up like this in the browser:

Could not load ./FSFenix_Render.gltf: Unexpected token '<', "<!DOCTYPE "... is not valid JSON

I've tried using relative and absolute paths, I've tried switching the gltf file from the /public directory to the /src directory. I have no ideia how to fix this.

Answer 1

When using useGLTF in the react-three-fiber library, ensure that the path to the .gltf file is relative to the root of your project. Instead of using an absolute path, use a relative one starting with /. For example:

import { useGLTF } from '@react-three/drei';

const { nodes, materials } = useGLTF('/FSFenix_Render.gltf');

Place the .gltf file in a folder that is accessible to your application, such as the public folder. Make sure the .gltf file exists at the specified path. After making these changes, restart your project.