Unable to load file referenced by relative path when published as Github Page

Questions
,
1

I have the following files which runs fine locally, but not working when uploaded to github as a github page.

The error message in console shows “Failed to load resource: the server responded with a status of 404(): /examples/models/3dm/model.3dm”

May I ask how to solve this relative path related issue?

The file structure is:

|-- index.html (which calls main.js in the scripts folder)
|   ... 
|   <script type="module" src="scripts/main.js"></script>)
|   ...
|
|-- scripts
|   |__ main.js (which loads model.3dm file in the examples/models/3dm folder)
|  
|-- examples
    |__ models 
       |__ 3dm
          |__ model.3dm

The code in main.js to load the model is shown below:

loader.load(
  "../examples/models/3dm/model.3dm",
  function (object) {
    object.traverse(function (child) {
      if (child instanceof THREE.Mesh) {
        child.material = meshMaterial;
      }
    });
    scene.add(object);
  }
);
2

Do you mind sharing a link to your hosted application?

3

Thanks, @Mugen87. Here is the link to my github repo for test which shows the problem as mentioned, and this is the github pages link.

4

Loading terra_simplified.3dm in your app produces a 404 HTTP error. However, if I load it over the below URL, it works fine.

https://hopezh.github.io/test_threejs/examples/models/3dm/terra_3dm/terra_simplified.3dm

Consider to make a fresh branch gh-pages and use it as the target branch for github pages. If that does not help, I suggest you contact the GitHub support.