This is an interactive 3D grid-based pathfinding simulator developed using React, Three.js, and Node.js.
You can place obstacles, define targets, and watch a robot (a cute animated cat!) find its way using A* or Dijkstra algorithms.
This project was created as a way to learn and explore React and React Three Fiber.
Along the way, I got a little help from ChatGPT to experiment, troubleshoot, and improve things one step at a time.
It’s not just a simulator — it’s a personal learning playground in disguise 🚀
- 🧱 Grid-based map with interactive cells
- 🧭 Path planning using A* and Dijkstra
- 🐱 Animated agent following the path
- 🧱 Pillar-style obstacle placement with auto-connecting bridges
- 🎨 Visually styled tiles with hover effects and sound
- 🌿 Custom gradient background and dynamic lighting
- ⚙️ Clean backend API for path computation
- React + Three.js (
@react-three/fiber,drei) - Node.js + Express
- A* & Dijkstra pathfinding algorithms
# Install dependencies for client and server
cd client && npm install
cd ../server && npm install
# Run the backend
cd ../server && npm start
# Run the frontend
cd ../client && npm run dev
-
Game mode: Puzzle levels & scoring
-
Algorithm visual comparison tools
-
Save/load level editor
Developed with love by Sedanur Kırcı
Mechatronics engineer | Robotics developer | Outdoor & book lover
This project's source code is licensed under the MIT License.
Some 3D assets (cat model and flag) are licensed separately under Creative Commons Attribution (CC-BY) or Free3D attribution terms.
Please see the Credits & Assets section for details.
-
🐱 3D Cat Model & Animations
Cat model used in this project was provided by supercg on Free3D. -
🏁 Target Flag Model
The flag model used in this project was created by inCook on Sketchfab
This project is non-commercial and the asset is used for educational and demonstrative purposes only.