You can also watch this as a video:
https://www.youtube.com/watch?v=QDoiD5vst9o
Some nice, juicy spinning piles of melons..
were one of my first attempts to build something with three.js.
A library to create interactive 3D Websites, which could be games, eye catching product showcases or anything else you can imagine and i tried to use it, to create my personal portfolio website.
Why I’m using three.js
Why you ask? I always found it very intriguing and wanted to create something similar myself. I’ve actually been intrested in 3D Design/ Modeling for a long time and played around with Blender and other Software. So I really wanted to start creating something with three.js.
Challenges I Faced
The biggest challenge i had was that i kind of overkilled my tech stack. I didn’t use react for almost 2 years and already wanted to jump in with next.js and many other libraries and everything kind of fell apart. I got errors upon errors and nothing worked and with that, my motivation was gone.
BUT, my desire to restart this project got reignited and now I want to approach this differently.
My Vision and Idea
First of all, I want to share my journey of creating this portfolio. I want to share what I learn and what challenges I face along the way, in the hope that it will keep my motivation up. When this website is finally done, I surely want to keep this channel going and finish all my abandoned side projects I have gathered in the past years, and even start new ones!
So… what was my idea in the first place? What did I want to use three.js for? Well, I had and still have a pretty clear picture in my mind: I’m a developer and a hobby photographer and I wanted to display both of these respectively. And since we now have all these fancy AI tools, I tried to let them paint this picture for me I had in my head for the past year. My idea was to display a laptop and a camera as 3D models which the user could interact with. The AI got me some pretty interesting results I can use for inspiration, when I create my actual design later on. And I’ll probably come back to the AI again and again as this turned out to be a really useful tool already!
Creating 3D Models
I need to create these 3D models, which means I have to dive deep back into Blender, which already brings up donut flashbacks again. So for now, all I want to achieve is to create a donut and display it on the website which might be hard enough already, since I also don’t have much experience in three.js and gonna learn this as I go.
Therefore the next logical step is TO DELETE EVERYTHING I had before, to really start this project from scratch again… And fix my git config because it somehow got broken on this pc. Great, already wasting time on the most important stuff again.
Before I really started with Blender i tried to use ChatGPT to help me create some 3D models, because I saw some people using it to create svgs and some crazy python scripts so I thought, why not?
Well it was completely lost with my prompts. Maybe I could get more useful results if I tried to fine tune them, but I think the models were just to complex because look what weird creatures it created:
After this little adventure I decided to model some delicious donuts by myself. And after about 7 hours I had created this beauty:
Exporting from Blender
With my donut finished and my repository fixed I successfully created a new react project, installed all the three.js libraries I needed and now I only had to figure out how to export my model from Blender so I could use them in the project but this already lead to some problems.
After a quick research, I read through this documentation which recommended to use this tool to convert your model to a react component which seemed to good to be true. Turns out, half of the stuff that I had in the render didn’t work in three.js
Either it was so bright, you couldn’t see anything or random planes that got imported because I forgot to turn them off in the render. But after some trial and error I got something working in the preview.
As I already said, some stuff of the render didn’t work and as you can see the sprinkles on the donut and in the background are not being displayed. This is because I used geometry nodes in blender to create them and I couldn’t really figure out how to get them working with the model export. If this is even possible. So I shifted my focus and just tried to get something to show up for now, since the donut wouldn’t be my final render, and more like a proof of concept. But it was good to know I really had to look out for a lot of things when I create my real models later on.
Funny enough, my biggest problem was to figure out why the donut was always displayed in such a small part of the screen. And as I dug deep into the 20 lines of CSS that came with the default react app I found the issue.. I mindlessly used min-width and min-height which for some reason didn’t cover the full height of the screen. My washed CSS knowledge can’t explain why this happens but after some digging around I changed it to width and height and everything worked as expected. I love CSS.
The next thing i want to figure out is how i could display animations I created in blender, because that would open up some possibilities for later, but i don’t wanna spend too much time on it for now.
Thanks for reading!
Top comments (0)