Host your Three.js project on GitHub Pages

Host your Three.js project on GitHub Pages

3D Web Development

Anirudh Panda's photo
Anirudh Panda
·Jun 5, 2021·

2 min read

3D GIF-downsized_large.gif

This is my Three.js project with Vanilla.js and I had a hard time hosting it on GitHub. After 2 days with some help from amazing developers, I finally did the hosting on GitHub pages and the motive for writing this article is there were few articles on hosting a three.js project.

I won’t go into how to develop a Three.js project from scratch. I am assuming you know that and already have a project to showcase on GitHub pages. This is my project repository: You can see the file structure of my project here and can compare it with yours

Check out the live demo here 👉

Issue I faced 🐛

The problem I faced while hosting it is I used to get a 404 Error from all the images/textures I have used in my project though everything was in right place. Also, the index.js file failed to load sometimes. I tried to find the solution across the web but the community is quite new and less. The docs were not so useful in my error. I went on to Twitter and took the help of an AR/VR developer to solve this issue.


  1. Create a new folder called “dist” in your project.
  2. Just add the following files inside the dist folder — index.html, style.css, index.js, and any images (or texture) that you have used for your project.
  3. Go to the package.json file & add this line inside the “scripts”
    "scripts": {
      "deploy": "gh-pages -d dist"
  4. Run the following command in your project to install gh-pages. Make sure you have cd into the root of your project directory.

    npm install gh-pages
  5. We just need to push the project to the repository on GitHub. For that, you will have to create a repository manually on GitHub and then run the following commands one after another -

    git init
    git remote add origin "YOUR_REPOSITORY_URL"
    git add .
    git commit -m "YOUR_COMMIT_MESSAGE"
    git push origin main
  6. After our code is pushed it into the main branch, we will create a new branch and name it as “gh-pages” Now run this command in your command prompt, make sure you are at the root of your project directory

    npm run deploy

  7. My gh-pages structure looks like this:


and main page structure looks like this:


After this, all images (textures) were loaded on the website.

I used the CDN for importing three.js module:


This how I hosted my three.js website on gh-pages successfully.


Did you find this article valuable?

Support Anirudh Panda by becoming a sponsor. Any amount is appreciated!

See recent sponsors Learn more about Hashnode Sponsors
Share this