Hi,
I’ve installed and successfully ran a few basic examples on a local server, but I cannot seem to load files, textures nor models. In both Chrome and Firefox I get a ‘not found’ error, although the files are there:
GET http://192.168.0.12:8080/three/examples/models/lafemme/lafemme.gltf 404 (Not Found)
I am on Ubuntu 20.04, node= 16.17.0, webpack=4.43.0, and this is a minimal code that triggers the error, here with a gltf file but it also gives me an error if I try to load a image for texture.:
import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader.js';
const loader = new GLTFLoader();
loader.load('three/examples/models/lafemme.gltf', function (gltf){
scene.add(gltf.scene);
}, undefined, function(error){
console.log("error: ",error);
}
);
When you open the url that gives you an error in your browser - the file is there (mind, not in your file system, in the browser) ?
Ie. if http://192.168.0.12:8080/three/examples/models/lafemme/lafemme.gltf throws error in three - you then paste that URL in your browser, it will download the GLTF as expected?
Therefore this statement is unfortunately not correct. The fact that the files are somewhere on the disc does not mean the webserver can see them.
Look at the relation between the root-level of your webserver and three/examples/jsm directory - then either adjust the paths in example files or move the three directory in a way, that going to the URL above will indeed return a GLTF model via the webserver.
If you’re using Webpack or a similar bundler you can also try using path-imports (if the bundler supports them):
import modelUrl from 'three/examples/models/lafemme.gltf';
loader.load(modelUrl, ...);
Thank you, your suggestions pointed me in the right direction. I found a solution by changing the file
bundler/webpack.dev.js
Inside that file change the key “contentBase” (originally pointing to “./dist” on mine) to whatever folder you want to be the root for the assets to load.
