3d maze

3d maze

by aquadk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/87/three.js"></script>
<script src="https://threejs.org/examples/js/renderers/Projector.js"></script>
<script>
  var Lab = {
    "pony": [
      106
    ],
    "domokun": [
      64
    ],
    "end-point": [
      218
    ],
    "size": [
      15,
      15
    ],
    "data": [
      [
        "west",
        "north"
      ],
      [
        "west",
        "north"
      ],
      [
        "north"
      ],
      [
        "north"
      ],
      [
        "north"
      ],
      [
        "north"
      ],
      [
        "north"
      ],
      [
        "north"
      ],
      [
        "north"
      ],
      [
        "north"
      ],
      [
        "north"
      ],
      [
        "west",
        "north"
      ],
      [
        "north"
      ],
      [
        "north"
      ],
      [
        "north"
      ],
      [
        "west"
      ],
      [
        "west",
        "north"
      ],
      [
        "north"
      ],
      [
        "north"
      ],
      [
        "west"
      ],
      [
        "west",
        "north"
      ],
      [
        "north"
      ],
      [
        "west"
      ],
      [
        "west",
        "north"
      ],
      [
        "north"
      ],
      [
        "west"
      ],
      [
        "north"
      ],
      [
        "west"
      ],
      [
        "west"
      ],
      [
        "north"
      ],
      [
        "west"
      ],
      [],
      [
        "west",
        "north"
      ],
      [
        "west"
      ],
      [
        "west"
      ],
      [],
      [
        "west"
      ],
      [
        "west"
      ],
      [
        "north"
      ],
      [
        "west"
      ],
      [
        "north"
      ],
      [
        "west"
      ],
      [
        "north"
      ],
      [
        "west",
        "north"
      ],
      [],
      [
        "west",
        "north"
      ],
      [
        "west",
        "north"
      ],
      [],
      [],
      [
...

CSS

body {
			  margin: 0;
			}
			
			canvas {
			  width: 100%;
			  height: 100%
			}

JavaScript

var objects = [];
var scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x040306, 10, 300);
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.shadowMap.enabled = true;
renderer.gammaInput = true;
renderer.gammaOutput = true;
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.BasicShadowMap;
renderer.shadowMap.renderSingleSided = false; // must be set to false to honor double-sided materials
document.body.appendChild(renderer.domElement);

var size = 25;
var divisions = 25;

var gridHelper = new THREE.GridHelper(size, divisions);
scene.add(gridHelper);
objects.push(gridHelper);
// outer wall
var geometryOV = new THREE.BoxGeometry(0.4, 1, 15.4);
var geometryOH = new THREE.BoxGeometry(15, 1, 0.4);
var material = new THREE.MeshLambertMaterial({
  color: 0x0000ff
});
var cube = new THREE.Mesh(geometryOV, material);
cube.position.x = 7;
cube.position.z = -0.5;
cube.position.y = 0.6;
scene.add(cube);
var cube = new THREE.Mesh(geometryOV, material);
cube.position.x = -8;
cube.position.z = -0.5;
cube.position.y = 0.6;
scene.add(cube);
var cube = new THREE.Mesh(geometryOH, material);
cube.position.x = -0.5;
cube.position.z = -8;
cube.position.y = 0.6;
scene.add(cube);
var cube = new THREE.Mesh(geometryOH, material);
cube.position.x = -0.5;
cube.position.z = 7;
cube.position.y = 0.6;
scene.add(cube);

// walls
var geometryV = new THREE.CubeGeometry(0.2, 1, 1.2);
var geometryH = new THREE.CubeGeometry(1.2, 1, 0.2);
var material = new THREE.MeshPhongMaterial({
  color: 0x00ff00,
  shininess: 50,
  side: THREE.DoubleSide,
  roughness: 0.5,
  metalness: 1.0,
  ambient: 0xffffff,
  specular: 0x050505,
  shininess: 1 // turn off hot spot, so as not to confuse things
});


var len = Lab.data.length;
var i = 0;
for (; i < len; i++) {
  var elen = Lab.data[i].length;
  if (elen > 0) {
   ...