Hello Three.js Community!
Over the past few months, I have been building an open-source maze-solving algorithm that can accept dynamic inputs and produce dynamic outputs. It can also auto-generate complex animations for the viewer. More information can be found in the setup tutorial.
You can find it on NPM as maze3d.js
It uses a breadth-first search in order to navigate a 3D matrix, finding the shortest possible route. The package can generate both static models and animated models that use spotlights with togglable shadows. This demo only showcased cubic mazes, however, the 3D matrix can be swapped (as long as it is formatted correctly) for any combination of barriers to solve for any shape. This is the basis of another project I am working on.
When this project first started, I didn’t know anything about Three.js or modeling on the web. Over the past 8 months, I have been working with Three.js, React, and React-three-fiber to start on some awesome projects.
Here is a Youtube Video showcasing some basic solves: Maze Algorithm Solving Increasingly Difficult 2D and 3D Mazes - YouTube. The program can do much more than what is in the video.
Here is the Youtube Video explaining how to set up the NPM package. The first few minutes of the video showcase how to use the demo below: maze3d.js - Dynamic 3D Maze Solving Algorithm - YouTube
Warning: Generating animations takes an extreme amount of ram. For some larger mazes (45x45x45) it still takes 10 seconds with my 32 GB of ram + 8 GB vram.
- Demo: Interactive maze3d v3.0.1 - CodeSandbox
- Source Files NPM: maze3d - npm
- Source Files Github: GitHub - michaelnicol/maze3d: A 3D Matrix Maze Algorithm that uses breadth first search
- User Interface Github: GitHub - michaelnicol/maze3d-world: A Three.js world for maze3d package on npm