Vite GitHubPages deployment - GET 404 - for checker.png texture

Questions
, ,
1

Problem with page not loading static texture asset checker.png.

I have added my texture image into root/public/checker.png, it works on dev server loading it like: const texture = loader.load(‘/checker.png’).

My source code

image

dist folder

image

However when i build with vite, it creates dist folder and puts the texture in root/checker.png but the code wont load it. In preview neither when i deploy to githubpages. When deployed it throws error: GET
https://jendahorak.github.io/checker.png. I dont understand why it cannot be found, when the checker.png is in the root.

my gh-pages subtree with dist folder for deployment

image
image941×279 13.2 KB

Could it be caused that I have multi page application?
Can someone please put me in the right direction how to fix this?

PS: Problem in materials.js, Materials and Lights page
GitHub: GitHub - jendahorak/three-testing: Repo for three.js testing.
Page: Three Vite Boilerplate

Thanks.

2

I think i have found the main problem.

It is that when deployed it tries to get the texture static asset checker.png from this adress GET
http://localhost:4173/checker.png

However the image is on: http://localhost:4173/three-testing/checker.png
My vite config looks like this:
image

How do i make it so it takes correct adress.
Sorry if it is a stupid question.

3

Well I have figured it out. Vite for some reason does not prepend the /base/ string to the path when loading the image from .js code. This can be solved by importing the image from the public folder like so:
image

And then referencing it like this:
image

I apologize for posting Vite problems to three.js forum. Hope this helps for other clueless peeps.

Working site: Three Vite Boilerplate
Code: GitHub - jendahorak/three-testing at gh-pages

1 Like
4

@jendahorak glad you figured it out. I think I’m running into a similar issue (not sure, just started learning three.js). I’m building a loader for stl file and it can load in my localhost, but after running ‘npx vite build’ and ‘npx vite preview’. The file is missing. You mentioned you made changes to vite config file but I cannot seem to find mine. Any suggestion is appreciated.