Thesis Project: Interactive 3D Engine Learning
Role:
Sole Designer & Developer | Research Coordinator
Project Significance
- Academic Purpose: Final undergraduate thesis
- Innovation: Web-based 3D automotive education tool
- Contribution: Bridging theoretical learning with interactive visualization
Development Process
1. Design Phase
- Tools: Figma + Framer
- Created 15+ UI variants for optimal learning flow
- Designed interactive 3D viewer interface
- User Testing:
- Conducted usability tests with 30 automotive students
- Iterated design based on cognitive load feedback
2. Technical Implementation
- Core Stack:
- Next.js (App Router)
- Three.js (WebGL rendering)
- React-Three-Fiber (3D component integration)
- Key Features:
- Interactive engine part labeling
- Step-by-step assembly simulation
- Cross-section viewing modes
3. Research Components
- Developed pre/post-test evaluation system
- Analyzed learning effectiveness metrics
- Documented 3D optimization techniques
Technical Highlights
- 3D Optimization:
- GLTF model compression (70% size reduction)
- Level-of-detail rendering
- Educational Features:
- Annotation system with automotive terminology
- Quiz integration with 3D context
Project Links
» Live Demo: 3d-otomotif.vercel.app
» Source Code: GitHub Repository
"This implementation demonstrates how 3D web technologies can transform mechanical engineering education."
— Thesis Examination Committee