3D Memory Game

A classic memory matching game reimagined in 3D using Three.js and React. Test your memory while enjoying an immersive, atmospheric experience.

Features ⭐️

3D card matching gameplay
Atmospheric environment with custom skybox
Animated card flips and transitions
Score tracking and game state management
Custom AI-generated card designs

Live Demo 📸

Try it out: Demo Link

Built With 🛠️

React - UI Framework
Three.js - 3D Graphics
React Three Fiber - React renderer for Three.js
Drei - Useful helpers for R3F
React Spring - Animation library
TypeScript - Type safety
Vite - Build tool
R3F-Perf - Performance monitor

Getting Started ⚡️

Prerequisites

Node.js (v16 or higher recommended)
npm or yarn

Installation

Clone the repository

git clone https://github.com/yourusername/3d-memory-game.git

Install dependencies

npm install

Start the development server

npm run dev

Current Status

Working Features ✅

Full 3D environment with custom lighting and shadows
Card matching mechanics
Score tracking
Atmospheric skybox (optimized JPEG version)
Desktop browser compatibility
Smoke shader

Known Issues ⚠️

Performance optimization needed for weaker devices

Roadmap 🛣️

Mobile Support
- Optimize asset loading for mobile devices
Performance Optimization
- Implement asset compression
- Add progressive loading
- Optimize render cycles
Environment Enhancement
- Explore HDR skybox implementation
- Add ambient sound effects
- Implement particle effects

Assets and Attribution 🎨

Models

Small Table by Quaternius (CC0)
Candle by Kay Lousberg (CC0)

Graphics

Skybox: Generated using BlockadeLabs
Card Textures: Generated with Canva AI
Matcaps Source

Implementation Notes 📝

Technical Challenges

Implementing proper loading states with Suspense
Managing texture flips during animations
Optimizing skybox file size while maintaining quality
Handling mobile device performance

Solutions Implemented

Custom asset loader for better resource management
Debounced loading screen updates
Optimized texture loading sequence
Memoized component renders

Acknowledgments

Inspiration

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

Feedback 🤝

This project was built as a learning exercise in React Three Fiber and 3D web development. If you have any suggestions, tips, or feedback about performance, code quality, or user experience, I'd love to hear them! Feel free to:

Open an issue to discuss potential improvements
Share your thoughts on mobile performance
Suggest better ways to handle asset loading
Point out bugs or problems you encounter

Your insights will help me learn and improve!

Models from poly.pizza and Pmnd.rs Market Small Table by Quaternius CC0 Candle by Kay Lousberg CC0 Skybox generated using BlockadeLabs Matcaps Images were generated with AI On Canva. HDRI conversiont to cube map from matheowis Base for candle smoke Perlin Noise Maker

Resources and Inspiration:

TokiLoshi/memory-game