Creating a Website Using Three.js

If you're a developer working in web development, you'll eventually become interested in creating fancy homepages using 3D. This thought is not only mine but also common among many developers. When I bring up creating flashy personal sites with 3D to other developers, everyone shows some interest.

After having this thought for almost 10 years, I finally created a website using 3D while considering a site renewal last year.

My previous personal webpage was made 5 years ago just before coming to Canada while studying at Peach Tree, when VueJS was just starting to gain attention. I made it for study purposes. However, now both the site content and the site itself are too old, so I was about to change it. Since a page with just introductions would be boring, I started studying WebGL and ThreeJS.

Showcase

I'll share the result first.

Welcome - sonim1

There's a laptop floating in space, and when you click it, the laptop opens and a virtual OS appears on the monitor. There are also zoom in and zoom out functions for adjusting laptop position.

In the OS, you can use a photobooth function using a webcam and a browser app that shows various sites and links.

First Step - Taking Three.js Course

TOC - ThreeJS Journey

I decided to learn Three.js for 3D implementation. After much research, I judged this course to be the cleanest with an excellent learning roadmap. Although each lecture was burdensome at 1-4 hours, I learned without noticing time pass thanks to many useful tips.

Since I had almost no experience with 3D except for a basic 3D modeling book I tried out of boredom in a club room during school, I was able to learn a lot.

There's also Discord, so you can contact directly if you have questions.

Also check out the amazing website with physics engine applied by Bruno Simon, the instructor of this course.

Bruno Simon

Getting Models

Market - pmnd

3D model work is another challenge. It's not as easy as you think. I was lucky to use models provided for free on the above site for the features I wanted to implement.

Of course, I couldn't use them as is, and additional work was needed to separate models for laptop opening and closing animations, but since I wasn't making them from scratch, I could save a lot of time.

Creating the OS

I created a virtual OS to appear when the laptop opens.

Virtual OS - sonim1

I made a separate website for OS implementation and rendered it on the laptop display using iframe.

Photobooth Implementation

I implemented it similarly to macOS Photobooth.

I used navigator.mediaDevices in the browser, and since it renders with iframe, I added the allow attribute as follows to enable separate permission requests for the iframe.

<iframe
	  src={ORIGIN_WEBSITE}
	  allow="camera *;microphone *"
	  style={{
			width: '100dvw',
			height: '100dvh',
			border: 'none',
	  }}
/>

Browser Implementation

I created a browser referencing Chrome browser UI. I also used the framer-motion library to implement tab D&D functionality. This library was also used for laptop 3D zoom in/out animations.

Inside the browser, I use iframe to open sites, but sites like YouTube, LinkedIn, and GitHub restrict iframe usage, so I added bookmark UI that opens in new windows.

Thanks to moving to bookmarks, the problem of having too many tabs was naturally solved.

React Three Fiber and Drei

React Three Fiber is a library implemented to easily use Three.js in React. Also, using the Drei library, you can easily use already abstracted features.

These are libraries created by a project group known as Poimandres or pmndrs that contributes to the open source frontend ecosystem. Not only React Three Fiber and Drei, but also very famous tools like react-spring, zustand, and valtio belong here.

Conclusion

1. I plan to use the customizable OS as a hub to collect future works. I was inspired by Interactive Developer Kim Jong-min's fff project and wanted to build a site where I could collect such works. Implementing it this way seems good.

2. I currently work at Sunnyside, a Silicon Valley company, and regularly met with my friend Yehia to study together. If I had done it alone, I probably would have given up in the middle, but thanks to this friend, we shared progress with each other and both ended up creating satisfactory results. I made a personal website using laptop and virtual OS, and this friend created 3D Monopoly by making even the models himself. 3D monopoly - yehia

3. Out of personal curiosity, I tried making ThreeJS code using ChatGPT in the middle of last year. The requirements were simply to add 100 articles and make them sparkle while rotating the screen to mouse position, but I kept getting results that were missing something, so there were quite a few trial and error attempts. Finally, the result made only with LLM and copy & paste is in the link below. I was surprised that the result was better than expected.

   ChatGPT + Threejs example

   Since I used the text davinci 3 model at the time, results using the current GPT4 model would probably be much better.