"A high-fidelity 3D environment exploring WebGL rendering, GLTF asset orchestration, and real-time animation loops using the Three.js engine."

The modern web is three-dimensional. This project is a technical implementation of a Real-Time 3D Rendering Pipeline, utilizing Three.js to bridge the gap between low-level WebGL and intuitive user interaction. By managing scene graphs, lighting matrices, and mesh animations, I created a performant 3D experience where a high-detail bee model interacts dynamically with its virtual ecosystem.

This project focuses on 3D Graphics & Rendering Logic:

• Scene Graph Management: Architecting a complex hierarchical scene including cameras, ambient/directional lighting, and 3D geometry.
• GLTF Pipeline Optimization: Efficiently loading and rendering external 3D assets (sourced from Skarfect) while maintaining high frame rates (60 FPS).
• Animation Loop Orchestration: Implementing a recursive requestAnimationFrame loop to handle real-time spatial transformations and flight path simulations.
• Viewport & Perspective Mapping: Dynamically recalculating the Aspect Ratio and Projection Matrix to ensure the 3D scene remains distortion-free across various screen resolutions.

• Interactive 3D Entity: A responsive bee model that reacts to environment parameters and user input.
• Cinematic Lighting: Realistic shadow mapping and light-source positioning for enhanced visual depth.
• Immersive Motion: JavaScript-driven flight physics that simulate natural movement patterns.

• Three.js: Primary engine for WebGL abstraction and 3D rendering.
• HTML5 & CSS3: For the container architecture and UI overlay integration.
• JavaScript (ES6+): Logic for asset loading, animation controllers, and event listeners.

1. Clone the repository:

   git clone [https://github.com/emineugurlu/3D.git](https://github.com/emineugurlu/3D.git)
   

2. Open the Project:

   cd 3D
   open index.html
   

Developed by Emine Uğurlu with a focus on WebGL engineering and interactive 3D graphics.