Scene Renders on Localhost but Not on Deployed Web Page Using Three.js and Vite

Questions
, ,
1

I am new to Three.js and have followed the instructions to build a 3D scene using Three.js and Vite. The scene renders perfectly on the localhost provided by Vite, but it doesn’t appear when I deploy it to my web page (index.html) :
index.html (308 Bytes)
main.js (1.7 KB)

2

Did you check Chrome devtools console on the deployed website? What errors appear there?

3

index.html:1 Access to script at ‘file:///C:/main.js’ from origin ‘null’ has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome-untrusted, https, edge.
main.js:1

    Failed to load resource: net::ERR_FAILED
4

Did you run npm run build from within your project folder and upload the contents of the resulting dist folder?

2 Likes
5

thanks for helping i fixed it , but will i face the same problem when i upload the web app online ? tell me if you know something about and thanks for your help again

6

If you upload the contents of the dist folder (after npm run build) to your server it should work as expected, give it a try and report back here with any problems, the two files you shared looked like they were source files of your project and not the resulting bundle that the build process generates…