Three.js javascript file not loading

Hello, I’m currently having an issue with hosting a website using Three.js. This is the site:

When the site loads, only the html and css are loaded in, but the javascript is not. I inspected elements and checked the console, and it says it’s failing to load resources and exiting with code 404. I import three, I think I have the right file path, but for example, textGeometry is failing to load.

Since my index.html file is not in the root directory, I added a netlify.toml file to tell netlify where index.html is, but I’m not sure if that is messing this up.

Here is my code:

The site works fine locally, but not here or on GitHub pages. I’m also not sure if this uses Vite, as I cannot find a vite.config file.

Any help would be appreciated, thanks.

@CalixH The structure of the repo seems a little unnecessary, since you’ve got three.js in a package.json at the root of the repo, and then all the other build dependencies in a package.json inside the CalixHuangSite folder.

As your build is being performed with vite and you have no other config, the default folder for the output of npm run build is CalixHuangSite/dist/, and that is all that you would need to have deployed by Netlify.

So to simplify things (and get it working), I would just…

  1. Add the three.js dependency to the package.json in CalixHuangSite/
  2. Remove the package.json and package-lock.json from the root
  3. Copy all the files & folders from CalixHuangSite/ to the root
  4. Delete the CalixHuangSite/ folder
  5. Run npm install in the root to ensure everything is in place
  6. Adjust the netlify.toml to…
    publish = "dist/"
    command = "npm run build"
  7. Change the imports in your main.js file so they no longer reference ../node_modules/

I may have missed some steps, but the basic idea is to get your site running in the root, with all your dependencies in the same spot, and keep it simple.

Thanks for your reply, the website is working now!

Another issue arose, but I don’t know if it’s netlify related. Because this is built with vite, it seems that it is currently unable to load images and fonts used only by the javascript file and not the html file. The javascript code is running, but inspecting the console again I see that resources are failing to load with the error code 404, and it is exactly the 2 images and font used only by the javascript.

Would you know anything about this?


@CalixH Your other issue is not Netlify related, it’s just build related which is easily confirmed because it occurs locally.

One thing you should do is remove your node_modules and dist folders using a .gitignore file.

  • The node_modules folder will be created when Netlify automatically runs npm install for your build.

  • The dist folder will be created when your Vite build occurs.

When I perform an npm run build locally, and then do an npx serve inside the dist/ folder that it creates, I can see that the resulting build does contain your images and they load.

When performing an npm run dev the images do not load for me.

It may have something to do with the image paths you’re using, I note that the images are in the root of the repository, but that in the html they’re referred to just with their name:

<img src="CalixHuang.JPG" style="display:none">

But in the main.js file they’re referred to with the location you expect them to be post-build, which is within an assets/ folder.

const caxTexture = new THREE.TextureLoader().load('/assets/CalixHuang-eb3701c6.JPG');

I’d probably just read the asset handling documentation for Vite and ensure everything is correct:

Thanks @nathanmartin :wave:t6: thanks for providing @CalixH that contexts. CalixH can you share your results once you give nathan’s tips a try?

Yep, it’s working great now! Turns out the issue was that for some reason vite didn’t recognize the files my javascript wanted, but as soon as the html or css required them, they were properly built into the asset folder.

Thank you so much! The last issue I have to figure out now is why the video won’t play…

Great to hear.

This isn’t actually a forum to get help debugging your own builds, it’s just for support with Netlify specific issues.

However if you’re asking why your video embed isn’t auto-playing it will be because you have the relevant attribute specified incorrectly.

autoplay is an attribute of the video element as shown here:

You currently have it incorrectly specified as part of the value for the controls attribute.

As shown in the documentation linked above controls doesn’t need a value, it’s a boolean based on the existence of the attribute.

So you likely want to change it to:

<video id="video" playsinline webkit-playsinline loop controls autoplay width="720" height="1280" src="climb.mp4" style="display:inline"></video>