gltfLoader cant find gltf model

I have this problem, where the gltfLoader cant find my gltf-model. It is pure black when i load my website. Previously, i had rendered a cube, which worked perfecly fine. But showing a gltf-model doesnt work. I am using Django and React. I tried everything, but i couldnt fix it. It doesnt give an error message after i type npm run build, but when i look into the console, it tells me: 404 (Not Found)
value @ three.module.js:41770
value @ GLTFLoader.js:220
(anonymous) @ App.js:75
(anonymous) @ App.js:89
il @ react-dom.production.min.js:244
Mu @ react-dom.production.min.js:286
(anonymous) @ react-dom.production.min.js:282
b @ scheduler.production.min.js:13
C @ scheduler.production.min.js:14

My code for this project or:


import React, { useEffect, useRef } from ‘react’;
import * as THREE from ‘three’;
import { GLTFLoader } from ‘three/addons/loaders/GLTFLoader.js’;

const ModelViewer = () => {
const containerRef = useRef(null);

useEffect(() => {
let scene, camera, renderer;

const init = () => {
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  camera.position.z = 5;

  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);

  const gltfLoader = new GLTFLoader();
  gltfLoader.load('/assets/models/house.gltf', (gltf) => {

    const box = new THREE.Box3().setFromObject(gltf.scene);
    const center = box.getCenter(new THREE.Vector3());

  const light = new THREE.AmbientLight(0xffffff);

  renderer.render(scene, camera);


return () => {

}, );



export default ModelViewer;


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

    <App />

The error says absolutely everything you need tho.

All you need to try is to make sure that when you open in the browser, your webserver returns the GLB model properly (keep in mind, even for local development, you have to have a local webserver that servers assets properly - you can’t access files directly from the drive.)


Most JS frameworks use the public directory, it’s exposed automatically with Vite and need to be explicitly exposed with express app.use(express.static('public'))

asset path aside, it would be quite bad to use threejs in react like that, use three-fiber, now you have full react integration, your scene and the dom are one tree with a shared state model.

there are hundreds of components for effects, soft shadows, good lighting etc, even a modelviewer.

your code btw will create leaks, renderer.dispose isn’t enough.