In the past, I've redesigned my website as various forms of blogs mixed with a portfolio of my work. This worked great when I was a freelancer and was focused on SEO optimization and establishing myself as an expert in the field.

More recently, though, I've decided to break away from the blog concept and instead use my website to do something creative, fun and interesting. I also wanted to find a way to encapsulate all the different things I like to do into one space, as my own personal "hub".

Meanwhile, I was fascinated with a couple 3D websites I had stumbled upon. I was blown away by the creativity that Bruno Simon put into his 3D portfolio site. I also loved how wonderfully wacky this website was, while still offering just enough information.

When I first set out to build a 3D site, it was a classic "I don't know what I don't know" situation, where I kind of had to just dive in and be ok with backtracking as I discovered rabbit holes. 3D art was completely new to me, so aside from my experience with web development, I was nearly starting from scratch.

My first attempts began with a framework called Babylon.js. This is a great framework for 3D game design, but I really struggled with it for my purposes and eventually found it was not going to work for me.

To be fair, I was also shooting for the stars. My initial concept was this big map where you could move a train around a forest terrain, and stop at a few different stations which could represent my different interests like painting, code, social media, etc... The idea was a bit ambitious for my first rodeo.

I had a very difficult time with some of the basic things like camera controls, creating and positioning objects... it was all very complex and I just didn't understand the fundamentals enough to fully grasp what I was doing.

After a couple months of struggling, I scaled down to bare bones: My name in 3D text, some text links lying flat on the ground beside my name and a cube with my bio written on it. I limited the camera controls so that it only allowed a user to "scroll" to read the block. I was at least able to see this idea through to completion, but it was VERY buggy and I was unsatisfied.

About six months into my struggle with 3D web design, Bruno posted on Twitter about his incredible Three.js course (Three.js Journey), and he was one of my original inspirations! Working through his lessons was a game changer, and it got me back on track.

My next iteration went back to a bit of an ambitious concept (I guess Bruno gave me too much confidence). I wanted to create an open world concept where you can explore a little world within my name, as if my name was a little city.

I took this concept pretty far, starting with my name in giant 3D letters, in the middle of a forest, then later switching to a space concept. I was also able to make a little office within the "a" of my first name.

I spent about four months on this design, and I learned a few things with this iteration:

1. Camera controls in an open-world concept are really difficult to sort out.

2. Hinting that an object is interactive is a super challenging UX issue.

3. An "open world" means lots of design... which means lots of time to build.

Having learned those lessons, I went back to the drawing board and decided to simplify again. Instead of an open world, I decided to design in an enclosed space – I wanted to make a house that was sort of lit in a moody way. My thought was that I could easily expand it over time - adding modules and hallways to interact with.

To simplify things as much as possible, I also planned on limiting the camera view to just one angle, and only allowing trucking movements between rooms, so that I could limit how much needed to be designed.

However, as I designed this house in Blender, I started to think it was looking too normal. I wanted something more creative, and also if things look normal there's sometimes an expectation for them to look realistic, and that was something I knew I couldn't achieve at my level of experience.

So again, I scrapped all of it, and simplified even more! My thought was - to make things less normal, we need to abstract. I started building a concept where I imagined the rooms in this house were pushed out of the white background of a flat, 2D website.

Again with this concept I limited camera control to one up-and-down motion that responded to standard scrolling gestures.

With this concept I got the closest to finished, and it took me far less time to complete– about two months this time. All items were clickable and scrolling was working great. Yet, there was something about it that I didn't like. I had this voice in the back of my head telling me it wasn't showing off Three.js in its full glory! The website was too subtle, too simple.

Using my previous learning experience, I noted that orbit controls are by far the simplest to deal with. Given that my best design just lacked some dimensionality, I started thinking about ways that I could use the same concept in a more 3D way. I imagined taking those same spaces that I was building, and wrapping them around a cube. Instead of scrolling to each one, the user could orbit around the cube. 

I took my laptop to a coffee shop, and started putting together the "nate cube". I pulled in assets from all the different iterations I had built – a chair from one, a shelf from another. 

In just a couple of hours, I was lighting the scene, and when I saw the render I knew that was the one!

At this time, only two sides of the cube are built. I plan on adding new sides over time, as well as continuing to build up the existing sides. I also have ideas for changing the background behind the cube from time to time.

By the end of this iteration of my website, I learned how to fix normals, do UV unwraps, bake textures, add a loading screen, and many other essentials. I finally built and published an MVP site that I am excited to continue expanding on over time.

Check out the finished product at natehub.net

Next up– I want to add some animations!