gltfLoader cant find gltf model

Questions
1

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:

“http://127.0.0.1:8000/assets/models/house.gltf 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
GL”

My code for this project https://github.com/Diem3/threeQuestions/tree/main/src or:

App.js:

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);
  containerRef.current.appendChild(renderer.domElement);

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

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

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

  renderer.render(scene, camera);
};

init();

return () => {
  renderer.dispose();
};

}, );

return

;
};

export default ModelViewer;

index.js:

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
2

The error says absolutely everything you need tho.

All you need to try is to make sure that when you open http://127.0.0.1:8000/assets/models/house.gltf 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.)

2 Likes
3

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'))

4

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.