Three Dimensional Web Browsing Experience

DESIGN STATEMENT

The goal of this project was to create a compelling design with the help of Three.js that would make learning about climate change more exciting and inspiring. I used Cinema4D to create a 3D model.

LINK TO THE MODEL

for part 1 CLICK HERE

Here’s the progress of the project:

for part 2 CLICK HERE

VIDEO WALKTHROUGH

FLOWCHART

The user’s journey would start on a page on which a preloader loads. The preloader would be accompanied by a quote about climate change to make a user think about it while the page loads. When the page loads, the user would be welcomed by the main page, on which a full model of a small world would be visible. The button prompting to start the journey would load additional menu items allowing the user to explore the site.

The menu at the bottom is focused on the effects of climate change, and with every button pressed, a little window with additional information will pop up on the screen.

MOOD BOARD, LOGO

For the mood board I choose some blue and red colors, and opted for black navigation to contrast.

When it came to the logo, I wanted to focus on a one degree change, which is a very prominent feature of climate changes.

STORYBOARD

(click on images to see the bigger picture)

ONE

Screen with the preloader.

TWO

Welcoming screen. The user has to click on the button to have a website menu appear.

THREE

After clicking on button number 1, a window pops up with some information about storms. Camera zooms closer to the forest and the camping site. The clouds start rolling onto the screen.

FOUR

Button 2 takes the user to the city center, where the heavy rain starts falling.

FIVE

Last button triggers a flooding effect.

PROCESS WORK FOR A 3D MODEL DESIGN

Starting my experience with Cinema4D, I first modeled the island in Adobe Illustrator and later ported it to the software.

I followed Mark’s tutorials from the slate, but somehow they were too simple in terms of designing, so I referred to online Youtube channels, following their tutorials on how to build objects such as houses and roads in Cinema4D. Here are some of the alterations and combinations that resulted from my following of the tutorials I watched. I especially liked Twisterelli’s YouTube channel, because there were a lot of ideas on colors, design and rendering. These tutorials of his helped me to see the possibilities of Cinema4D.

I wanted to make a spherical model, much like Earth, so here was one of my ideas about a potential design. I didn’t develop it further because I didn’t like it. It looked like a makeshift drum, and I was afraid that if I added textures to the bottom of the model, the file size would become too big, and the final effect probably wouldn’t be worth the hassle.

Accessorizing the globe with setpieces like cities, forests, oceans or tundras actually turned out to be more difficult then I had initially thought. It was because everything had to be rotated at the right angle in order to have it look good, however in practice, the process proved to be too daunting for me. Thus, the idea was therefore abandoned.

Since objects such as trees were too hard to position, I tried a more abstract solution, but in the end I didn’t really like this idea either. I thought it was a neat idea, though; perhaps I’ll use it for a more appropriate project.

I combined the first two models I designed following various tutorials from YouTube, and put them together on a circle of water. I liked this idea, and overtime, the design was finally finalized.