トップへ(mam-mam.net/)

3D迷路のサイトを作成 ~Webサイトで3Dコンテンツ(Three.js)デザイン

検索:

Three.jsで迷路を作成して3D表示し、マウスボタン長押し(ロングタップ)でカメラを前進、後退、左右回転して迷路内をウォークスルーする(Three.js[r145]を使用)

以下のCanvas上部をマウス左ボタン長押し(ロングタップ)でカメラが前進、左側長押しで左回転、右側長押しで右回転、下部長押しで後退します。


棒倒し法アルゴリズムで迷路を作成してキャンバスに2D、および3D表示しています。

function createMaze(){
  //棒倒し法アルゴリズムで迷路を作成
  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;
        }
      }
    }
  }
}