GLTFLoader can't find GLTF files

Questions
,
1

Hello!

I am having trouble loading GLTF files on my THREE.js program. Every time I try to run it, I get a 404 error. I have checked multiple times to see if the GLTF file is there, and I am able to run OBJ files in the same directory. When I use an OBJLoader on a GLTF file, it is able to find it (albeit with an error, though not 404). What should I do? I have tried using multiple CDNs and a local THREE.js folder, but both have not worked. I am using a Node.js server.

OBJLoaders work for me, but I want to use GLTF format because I’ve read that it’s better for animation (I am trying to make a game).

EDIT:
code snippet

import * as THREE from 'https://cdn.skypack.dev/three@0.129.0/build/three.module.js';
import { GLTFLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/GLTFLoader.js';
import { MTLLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/MTLLoader.js';
//import { OBJLoader } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/loaders/OBJLoader.js';
//import { OrbitControls } from 'https://cdn.skypack.dev/three@0.129.0/examples/jsm/controls/OrbitControls.js';
//import * as THREE from './node_modules/three/build/three.module.js';
//import {OBJLoader} from './node_modules/three/examples/jsm/loaders/OBJLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
scene.background = new THREE.Color('#DEFEFF');

const canvas = document.querySelector("#c");
const renderer = new THREE.WebGLRenderer({canvas});
renderer.setSize(window.innerWidth, window.innerHeight);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshPhongMaterial( { color: 0xffff00 } );
const cube = new THREE.Mesh( geometry, material );
scene.add( cube );

const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(-1, 2, 4);
scene.add(light);
camera.position.z = 5;

const gltfLoader = new GLTFLoader();
//const mtlLoader = new MTLLoader();
/*
mtlLoader.load('./public/test_obj.mtl', (mtl) => {
	mtl.preload();
	for (const material of Object.values(mtl.materials)) {
		material.side = THREE.DoubleSide;
	}
	objLoader.setMaterials(mtl);
	objLoader.load('./public/test_obj.obj', (root) => {
		scene.add(root);
	});
});
*/
		
gltfLoader.load('./public/test_obj2.gltf', (root) => {
	scene.add(root);
});
2

Maybe try THREEJS Editor?See if there’s a difference?

3

Okay, I will try that. I will get back to you later.

4

I know this is an old topic and I said I would try the editor, but I’m bumping. From what I see, all the THREEJS Editor does is provide a space for creating 3D models, not actually loading them into a node.js server, which is the problem I’m having.