After loading site locally images are showing properly
and here is how the site look after deploying
here is the Github repo for the code:- GitHub - shuence/Shuence_Portfolio: Personal Portfolio Website using threejs
After loading site locally images are showing properly
here is the Github repo for the code:- GitHub - shuence/Shuence_Portfolio: Personal Portfolio Website using threejs
You need to move the img
directory into the public
directory.
That don’t worked out.
It worked for me.
I can see in your repository that you did not move the img
directory into public
.
Here is my clone of your git repository: coelmay/ShuenceSite [deleted]
And here is the deployed I made: 6140463d69e6835cd1623afc–agitated-kowalevski-2cc360.netlify.app [deleted]
Hi @coelmay I’m also having trouble deploying my site through Netlify. Here’s my repo.
Are you saying I should create a public/img folder for all of my assets before running npm run build?
Hi @Darkskittlz
In your case, no.
The images are not referenced as img/FILENAME
, rather simply as FILENAME
. So rather than put the images in public/img
, put then into public
. The reason for needing to move the files into public
(and the reason they are not bundled otherwise) is the images are not referenced in HTML (i.e. <img src="sun.jpg">
) rather in JavaScript.
Thanks for your response. I’ve put the images in public and referenced them in my main.js but my netlify deploy is still not rendering the img files
I didn’t mean change the path in main.js
.
You need to remove the ./public/
path from main.js
and it will work.
Thank you sooooooo much @coelmay! That did work perfectly. I appreciate your help.
@coelmay I am also facing the same issues. Here is my Repo. GitHub - codewithnafiz/class-portfolio
and the link to the app
https://ccsc9neptune.netlify.app/
Please look into my repo and see what is my issue
Hey there, @codewithnafiz
I believe the issue you are encountering is slightly different. When I follow the URL to your site, I hit a 404. I took a look at your repository, and it looks like your index.html is in the wrong spot. Please give this guide a read and see if it addresses your obstacles:
As @hillary mentioned, the issue you have is different to that of the OP. The support guide provided is the best starting point to resolve your issue @codewithnafiz .
I mean where should i put my index.html then?
What are your current build settings @codewithnafiz?
Import three js modules through CDN Instead of Npm or Yarn It will work :!
i am new to programming and i dont know many things. can you do it for me? please
Hey @codewithnafiz
I can’t do this for you, but I can tell you how to fix it.
Inside client
, you need to create another directory public
and move the .jpg
, and .jpeg
files into it. This is because these files are not referenced in the index.html
but in main.js
so Vite does not copy them. public
is the directory to use for assets you want copied during build (see Vite documentation.)
For Netlify build settings, you need to set client
as the base directory and the publish directory to client/dist
(client
is automatically pre-pended to the publish directory when it is set as the base directory.) Then set the *build command to npm run build
, and all is set.
You can remove the node_modules
directory as this is not required. Netlify installs these modules during build.
If you have further issues, do respond here.
Suggested build settings for your project:
Thanks for solving the issue ,
I was also having same issue.
Thanks
My git repo: GitHub - tathagatamishra/3D at PLANET
Netlify link: https://p-l-a-n-e-t.netlify.app/
I’ve the same problem, my three.js model is not loading, it’s always give me all these error
Error: THREE.GLTFLoader: Failed to load buffer “scene.bin”.
loadBuffer https://timely-sunflower-f7fb45.netlify.app/assets/index-aca35cc6.js:3416
load https://timely-sunflower-f7fb45.netlify.app/assets/index-aca35cc6.js:3416
THREE.GLTFLoader: Couldn’t load texture textures/M_Monitor_normal.png index-bfd69eb1.js:3416:169931
THREE.GLTFLoader: Couldn’t load texture textures/M_Speakers_baseColor.png index-bfd69eb1.js:3416:169931
THREE.GLTFLoader: Couldn’t load texture textures/M_Details_normal.png
but it’s perfectly load, I mean my model perfectly load on my localhost, but when I upload my dist file my scene.gltf and textures are not load properly and also if you stay maybe 3-5 minutes on my site then you’ll see the model. is anyone here can help me out to fix this problem
this is my github link:GitHub - NAYMUR143/three.js
this is my project link: https://timely-sunflower-f7fb45.netlify.app/
Hi @naymur Sounds like you might have a path issue. Can you double check that the file path matches what is being uploaded to the server? Also what does your console say? Could you share that please?
Thanks!