Simplest way to publish three.js project that load external files

Questions
1

Hi!

This might be a n00b question already asked a 100 times, but here I go. I’ve created a simple project showing a glb file which can be rotated and so on. Now I wan’t to publish it to a website and I immediately run into issues. All projects relying on loading external files seem to not work do to CORS issues.

What is the simplest way to solve this for someone not used to deplying websites and all the lingo surrounding that?

Many thanks in advance!

/Björn

2

Host everything in one domain.

If that is not possible, external resources must include CORS headers otherwise you can’t load them with three.js asset loaders.

3

Thanks a lot for your answer. What I’ve tried so far is to host what I believe to be everything on the free web server InfinityFree, but even so it fails to load my files. In my case the files I want to load is one Hdri and one glb. If I remove these two files and instead use regular lights and a native cube in three.js, then it works like a charm. So for some reason the loading of files are blocked and the console mentions CORS violations.

I’m not familiar with how to include CORS headers. How and where is that done?

Regards,
Björn

4

This is a screen shot of the console when I try to access my project. Notice the errors at the bottom.

console log
console log1401×727 58.2 KB

5

They seem to be 404 (not found) errors, meaning that the resources you are trying to load are either not in the specified location or that the reference path to the files is not correct

1 Like
6

Yes at the end there are 404 errors but preceeding them is a 302 that I’m not sure what’s causing. The files are present and the project works like a charm when I run it in a local webserver (live server through VS Code).

Could it be that InfinityFree for some reason doesn’t support my workflow.

7

Could it be that the path entered for my files is actually wrong. I’ve tried to enter a relative path but this confuses me a little. Should the path be relative to the javascript containing the path or should it be relative to the html running the javascript?

8

It’d help greatly if you shared what your console log returns (not the network panel) , or else a live demonstration of your code setup… are you using a bundler or directly compiling in browser? If using a bundler, there’s a workflow that restricts external resources being loaded to a “public” directory. If not using a bundler there could be a number of issues depending on your code format, inclusive of infinityfree’s capabilities. Infinityfree may be restricted but very much doubtedly in loading resources relative to a project folder being hosted

9

Thanks for all your efforts! I’ve written the app in VS code and just uploaded to infinity through FileZilla.

Here is what the console looks like:

console
console1259×493 38.4 KB

Here is the present state of the network tab

network tab
network tab1095×976 131 KB

And last is a screen shot of the structure of the app from FileZilla. The external assets är in the circled folder “assets”.

structure
structure1214×890 64.2 KB

I’m guessing all this means that I’m not using a bundler and am in fact compiling through the browser eventhough I’m not quite sure what any of that means.

Thanks again!
/Björn

10

Case closed! I’m up and running! After changing to absolute paths for my two external assets everything started working. Thanks for everyones assistance!

1 Like