Hey everyone 👋 , Welcome to my first blog where I share the behind-the-scenes journey of developing my most recent 3-D room portfolio project. In this post, I'll delve into the various challenges I encountered during the development process and how I overcame them.
Overview of the Project
I wanted to work and develop something in 3-D for a long time and in this project, I gave it a shot. The project I undertook was to create a Room portfolio website using Three.js. Check out my project here ✨.
Challenges 😤
1. Newbie in 3-D modelling
To start this project, one major requirement was to create a 3D model for my room. I wanted to try something beginner-friendly and then I learned about Spline. Spline is a multiuser, cross-platform and collaborative 3D design tool. It is easy to use and I used it to design my 3D room model.
Learn more about Spline here.
2. GitHub Errors
After checking that everything worked fine on my machine, I pushed my code to GitHub, and a problem arose. This is what it looked like 👇
The 3D model I created in Spline had a file size of almost 182 MB and GitHub does not allow to push files larger than 100 MB. Upon researching this, I learned that GitHub has something called Git Large File Storage that is used for versioning large files. So, I Set up git LFS in my repository and pushed my large files using it and I got another error!!!
Upon further investigation, I discovered that it was due to an existing file in the GitHub repository that needed to be tracked with Git LFS. To resolve this problem, I turned to GitHub's documentation, which provided me with the necessary solution.
Tip: If you get an error that "this exceeds Git LFS's file size limit of 100 MiB" when you try to push files to Git, you can use git lfs migrate instead of filter-repo or the BFG Repo Cleaner, to move the large file to Git Large File Storage. For more information about the git lfs migrate command, see the Git LFS 2.2.0 release announcement.
Here's the link to the doc :
moving-a-file-in-your-repository-to-git-large-file-storage
3. The deployment didn't go well😵
The project got deployed on Vercel but it was not working as it was supposed to and an error like this was showing up on the web console.
It was from a JavaScript file that was not in my source code but in the files from the libraries I included in my app.
After spending great hours trying to find the source of the error I found that the error was coming from a GLTFLoader file from Three.js.
GLTFLoader, provided by Three.js, is responsible for loading 3D content. You can learn more about it here. While trying to find what exactly was causing the issue, I checked network activity in the Chrome dev tools and found out that the root of the error was the .glb file and git lfs.
You must be thinking ... What? How is it possible?
Well, that's true... git lfs was returning the fetch request's response as Status 200 but was not returning the 182 MB content of the .glb file and since the GLTF loader was expecting the content of the .glb file and was getting something else, it was raising an error.
4. Reducing the .glb file size
Giving it a thought, it would not be a great user experience for a user to wait till the app loads 182 MB of content. So, now I had to reduce the file size as much as possible and push the file to GitHub directly, eliminating the need to use git lfs in the first place. In Blender, there's an option to export the compressed version of the 3D models which greatly reduces the file size but Spline does not have that feature, so I tried a hacky way to make things work :P. I exported the 3D model from Spline, imported the file into Blender and then exported the .glb file using its compression feature.
Voilà,🥳 It worked, 182 MB got compressed to almost 3 MB.
After this, I used dracoLoader from Three.js to decompress the file's content and deployed the app again.
Conclusion
3D websites and applications are amazing but they do come with some complications. However, these complications can be resolved using appropriate tools. So, If you are facing issues with:
- Large File pushes - Try Git LFS.
- Error after deployment - It might be due to a large file size.
- File compression - Try Blender's compression feature.
- Decompression - Use DracoLoader by Three.js.
Thank you, for reading my blog. I would love to know what you think of this blog in the comments section. Have a nice day 🤗!
Top comments (1)
Nice article! I learned a few new things.