This project represents one of the initial milestones in my development career. Created as part of my educational journey, specifically as a graduation project during my second year in 2022, it served as a platform to apply and demonstrate my developing skills.
While I acknowledge that the project's codebase may lack organization and adhere to established coding conventions and best practices, I consider this realization to be a positive outcome. It serves as a testament to my growth and progress as a developer, highlighting my ability to reflect on past work and recognize areas for improvement.
Welcome to the fascinating world of this 3D website project! This project showcases my passion for both IT and architecture, combining them to create a captivating 3D experience. Utilizing JavaScript and the powerful Three.js framework, I built this website from scratch to provide users with an immersive exploration of mesmerizing 3D models.
- JavaScript: The primary programming language used in this project, JavaScript, enables the interactive and dynamic features of the website. It allows for smooth navigation between the various control modes and facilitates the rendering and manipulation of the 3D models.
- Three.js: Three.js is a powerful JavaScript library that simplifies the creation and rendering of 3D graphics on the web. It provides a wide range of tools and functionalities, such as cameras, lights, materials, and geometry, making it easier to develop complex 3D scenes. With Three.js, I was able to bring the models to life and provide users with an engaging interactive experience.
- SketchUp and Blender: As an architecturally inclined developer, I leveraged my knowledge of design principles and 3D modeling tools like SketchUp and Blender. These tools allowed me to create detailed and visually appealing models that form the heart of the website. From SketchUp's user-friendly interface to Blender's powerful rendering capabilities, these tools played a crucial role in crafting the intricate virtual environments.
The website offers three distinct control modes that empower users to explore the 3D models in different ways:
- Orbit Mode: This mode allows users to orbit around the 3D models, providing a comprehensive view from different angles. Users can rotate the camera around the models, zoom in and out, and examine the details of the virtual environment.
- FPS (First-Person Shooter) Mode: In this mode, users can navigate through the 3D space as if they were physically present within it. They can move forward, backward, and sideways, exploring the models from a first-person perspective. This mode enhances the sense of immersion and allows for a more interactive experience.
- Flight Mode: Flight mode enables users to soar through the virtual environment, giving them a bird's-eye view of the 3D models. Users can control the camera's position and movement, simulating a flight-like experience. This mode provides a unique and dynamic perspective, adding an element of excitement to the exploration process.
Under the hood, Three.js employs a rendering technique called WebGL to display 3D objects in a web browser. WebGL is a JavaScript API that utilizes the power of the device's GPU (Graphics Processing Unit) to perform real-time rendering of complex 3D scenes. It provides a high-performance graphics pipeline, enabling smooth rendering and manipulation of 3D objects.
Three.js abstracts away the complexities of working directly with WebGL, providing a more user-friendly interface for creating and manipulating 3D objects. It handles the initialization of the WebGL context, manages the rendering loop, and provides a set of helper functions and classes for working with 3D geometry, materials, lights, and cameras.
To render objects with Three.js, you typically start by creating a scene that acts as a container for all the 3D elements. You can then define and position 3D objects within the scene using geometric primitives or imported models. Next, you set up a camera to define the viewpoint from which the scene will be rendered.
Once the scene and camera are set up, you can add lights to illuminate the objects and apply materials to define their appearance. Three.js supports a variety of materials, including basic colors, textures, and more advanced shaders for realistic rendering effects.
Finally, you utilize a renderer provided by Three.js to render the scene onto a canvas element within the web page. The renderer takes care of the low-level WebGL operations, performing the necessary calculations and transformations to display the 3D scene based on the camera's perspective.
Throughout the development process, I strived to balance creativity and technical expertise, incorporating architectural design principles into the virtual world. While the code may not meet the highest standards of quality or adhere to strict conventions, it showcases my dedication to continuously learning and improving as a developer.
Thank you for taking the time to explore this project. Your feedback, suggestions, and potential collaborations are always welcome as I continue to refine my skills and push the boundaries of web development.