Rendering interactive 3D scene as a web-page using Three.js, WebGL, and Blender

Abstract

Building websites are the most sought skill in the tech world today. It has a low barrier of entry and is relatively easier to learn. Therefore, there is an abundance of web developers in our current market. Unfortunately, in Bangladesh, there are very few frontend developers and research show that most website developers become backend developers. The demand for frontend developers is ever increasing as users require a more immersive and new experience, therefore I decided to pursue it, but not in the traditional 2D way where it has only stylized HTML elements. I wanted to make immersive 3D websites that mimic the feel of video games. To do this, I had to learn and utilize the necessary 3D tools, Three.js, WebGL, and Blender. Native WebGL is very low level therefore to produce proper results I used the power of Three.js which is a graphics library that helps with rendering 3D rendering and many other features. Working with Three.js means working at the intersection of computer graphics and web development. The library is open source and freely available for anyone to use. Use cases for this project can be as simple as a product viewer for businesses or can be complex simulations that showcase the trajectory of a spaceship flying into orbit. For my project, I aimed to render a custom scene I created using Blender and display it as a web page for my fellow students to view. With the help of shaders, I wanted to further improve the viewing experience. Having my scene on a web page also means I can freely explore my artistic side and display it in my portfolio.