Create a Maze and Display it in 3D | Walk Through the Maze with Mouse or Tap (Three.js[r145])
Explore a 3D maze in your browser!
This interactive content generates a realistic 3D maze with Three.js, allowing a walk-through experience.
The maze is created using the "stick-falling" algorithm, combining a 2D map with 3D visualization for visual enjoyment.
The green circle marks the start point, the blue circle marks the goal. You are represented by a red icon, and your objective is to escape the maze!
On the canvas: hold down the left mouse button (long tap) at the top to move forward, hold on the left side to rotate left, hold on the right side to rotate right, and hold at the bottom to move backward.
function createMaze(){
// Create a maze using the stick-falling algorithm
for(let x=0;x<=mazel;x++){
maze[x]=[];
for(let y=0;y<=mazel;y++){
maze[x][y]=0;
}
}
for(let x=0;x<=mazel;x++){
maze[x][0]=1;
maze[x][mazel]=1;
}
for(let y=0;y<=mazel;y++){
maze[0][y]=1;
maze[maze.length-1][y]=1;
}
for(let x=2;x<(mazel-1);x+=2){
for(let y=2;y<(mazel-1);y+=2){
maze[x][y]=1;
while(true){
let rr=0;//0:↑ 1:→ 2:↓ 3:←
let xx=x,yy=y;
if(y==2){
rr=parseInt(Math.random()*4);
}else{
rr=parseInt(Math.random()*3)+1;
}
if(rr==0){yy--;}
if(rr==1){xx++;}
if(rr==2){yy++;}
if(rr==3){xx--;}
if(maze[xx][yy]==0){
maze[xx][yy]=1;
break;
}
}
}
}
}