About This Project

3D Model Creation

Qeleshe: Modeled in Blender with custom displacement, roughness, and ambient occlusion maps to simulate felt texture. Normal maps were converted from DirectX to OpenGL for correct shading.

Skanderbeg's Sword: Created in Blender using clean geometry and a PBR material setup. Textures include base color, roughness, and metalness maps. An alternate GLB with an embedded animation was exported using keyframed transforms to simulate the sword "opening" motion.

Çifteli: Built in Blender with layered materials simulating wood grain and fabric. Includes multiple texture maps (bump, normal, diffuse, height) with color ramps and ambient occlusion for realism. Baked and optimized for performance.

Design & Implementation

The application follows the MVC pattern:

• Model: .glb files and texture assets created in Blender.
• View: Responsive HTML5 and CSS3 styled with Bootstrap 5.
• Controller: JavaScript (Three.js) for rendering, user interaction, camera controls, and animation toggles.

Bootstrap was chosen for its grid system, responsiveness, and clean UI components. Three.js was used instead of alternatives like Babylon.js due to its mature ecosystem, flexibility, and ease of integration with custom shaders and loaders.

Media & Interaction

The app includes:

• Audio playback for the Çifteli instrument with a play/stop toggle button.
• Interactive Open Sword button that dynamically loads an animated GLB model and plays a synchronized sound. Button toggles to “Close Sword” to revert back to the static model.
• Camera presets (front, side, top, isometric) for better 3D object viewing.
• Interactive controls to rotate objects, toggle wireframes, and reset views.
• Integrated post-processing effects (toon shader, FXAA) and a custom material logic flow in Blender for realism.

Accessibility & Testing

The site is designed with accessibility in mind:

• Buttons use clear labels and icons for visual clarity.
• Color contrast checked to meet WCAG guidelines.
• Layout tested on Chrome, Firefox, Safari (mobile + desktop)
• Responsive at mobile, tablet, and desktop breakpoints.