3D Matrix

In this example below you will see how to do a 3D Matrix with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by serkanyersen, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright serkanyersen ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>3D Matrix</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="view">
  <div class="matrix no-axis" style="transform: rotateX(-30deg) rotateY(-45deg);"></div>
</div>
<div class="designer">
</div>
  <script src='js/ebymor.js'></script>
<script src='js/qoeozo.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5.1/dat.gui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/serkanyersen/3d-matrix-NNBJqJ */
html, body {
  height: 100%;
  width: 100%;
}

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body {
  background: #444;
  display: flex;
  flex-direction: column;
}

.view {
  display: flex;
  justify-content: center;
  align-items: center;
  -webkit-perspective: 300px;
          perspective: 300px;
  -webkit-transform: scale(1);
          transform: scale(1);
  flex: 2 1 0;
}

.dot {
  position: absolute;
  color: #fff;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  min-width: 1em;
  min-height: 1em;
  text-align: center;
  font-size: 1em;
  line-height: 1em;
}

.wall {
  top: 0;
  color: #FFFF66;
  background: #FFFF66;
}

.brick {
  background-image: url("https://1.bp.blogspot.com/-sSC536WtaiM/T6AuKlOVKXI/AAAAAAAABOE/_Y86X3ydxDk/s1600/minecraft_brick.jpg");
  background-size: cover;
}

.noShade {
  -webkit-filter: none !important;
          filter: none !important;
}

.transparent {
  opacity: 0.5;
}

.top {
  -webkit-transform: rotateX(90deg) translateZ(0.5em);
          transform: rotateX(90deg) translateZ(0.5em);
  -webkit-filter: brightness(100%);
          filter: brightness(100%);
}

.front {
  -webkit-transform: translateZ(0.5em);
          transform: translateZ(0.5em);
  -webkit-filter: brightness(90%);
          filter: brightness(90%);
}

.left {
  -webkit-transform: rotateY(90deg) translateZ(-0.5em);
          transform: rotateY(90deg) translateZ(-0.5em);
  -webkit-filter: brightness(80%);
          filter: brightness(80%);
}

.right {
  -webkit-transform: rotateY(90deg) translateZ(0.5em);
          transform: rotateY(90deg) translateZ(0.5em);
  -webkit-filter: brightness(70%);
          filter: brightness(70%);
}

.back {
  -webkit-transform: translateZ(-0.5em);
          transform: translateZ(-0.5em);
  -webkit-filter: brightness(60%);
          filter: brightness(60%);
}

.bottom {
  -webkit-transform: rotateX(90deg) translateZ(-0.5em);
          transform: rotateX(90deg) translateZ(-0.5em);
  -webkit-filter: brightness(50%);
          filter: brightness(50%);
}

.matrix {
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  cursor: move;
}

.no-axis > .axis {
  display: none;
}

.axis {
  content: "X";
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  top: -50%;
  left: 50%;
  height: 200px;
  width: 200px;
  border-left: 1px solid blue;
  border-bottom: 1px solid green;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  position: relative;
  color: white;
  padding: 5px;
}

.axis::after {
  content: "Y";
  height: 100%;
  width: 100%;
  padding: 5px;
  border-left: 1px solid blue;
  border-bottom: 1px solid red;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateY(-90deg);
          transform: rotateY(-90deg);
  -webkit-transform-origin: left;
          transform-origin: left;
}

.axis::before {
  content: "Z";
  height: 100%;
  width: 100%;
  padding: 5px;
  border-left: 1px solid red;
  border-bottom: 1px solid green;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: rotateX(-90deg);
          transform: rotateX(-90deg);
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
}


/*Downloaded from https://www.codeseek.co/serkanyersen/3d-matrix-NNBJqJ */
/*eslint-env es6 */
'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var solidBlock = new Matrix3D(12, 12, 12, 1);

var random = new Matrix3D(10, 10, 10, 0).forEach(function (val, x, y, z, self) {
  var color = 0;
  if (Math.round(Math.random()) === 1) {
    color = '#' + Math.floor(Math.random() * 16777215).toString(16);
  }
  self.set(x, y, z, color);
});

var questionBlock = new Matrix3D([[[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1], [1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1], [1, 0, 1, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 1, 1, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]], [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]], [[1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]], [[1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]], [[1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]], [[1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]], [[1, 0, 1, 0, 1, 1, 1, 0, 1, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]], [[1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]], [[1, 0, 1, 1, 1, 1, 1, 1, 1, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]], [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 1, 0, 1, 0, 1, 0, 1, 0, 1]], [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 1, 1, 1, 1, 1, 0, 0, 1], [1, 0, 1, 0, 0, 0, 0, 0, 1, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 1, 0, 1], [1, 0, 0, 0, 0, 1, 1, 1, 0, 0, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]]);

var smallBox = new Matrix3D([[[0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [1, 1, 1, 1, 1], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0]], [[0, 0, 1, 0, 0], [0, 0, 0, 0, 0], [1, 0, 0, 0, 1], [0, 0, 0, 0, 0], [0, 0, 1, 0, 0]], [[1, 1, 1, 1, 1], [1, 0, 0, 0, 1], [1, 0, 1, 0, 1], [1, 0, 0, 0, 1], [1, 1, 1, 1, 1]], [[0, 0, 1, 0, 0], [0, 0, 0, 0, 0], [1, 0, 0, 0, 1], [0, 0, 0, 0, 0], [0, 0, 1, 0, 0]], [[0, 0, 1, 0, 0], [0, 0, 1, 0, 0], [1, 1, 1, 1, 1], [0, 0, 1, 0, 0], [0, 0, 1, 0, 0]]]);

var nestedBox = new Matrix3D([[[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]], [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]], [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]], [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]], [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0], [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]], [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]], [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0], [0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0], [0, 0, 0, 0, 1, 1, 1, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]], [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]], [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0], [0, 0, 1, 1, 1, 1, 1, 1, 1, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]], [[1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]], [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]]);

var tetris = new Matrix3D([[[1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]], [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 'red', 0, 0, 0, 0, 0, 0, 1], [1, 0, 'red', 0, 0, 0, 0, 0, 0, 1], [1, 0, 'red', 'red', 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 'green', 0, 0, 0, 1], [1, 0, 0, 0, 0, 'green', 'green', 0, 0, 1], [1, 0, 0, 0, 0, 'green', 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 'blue', 0, 1], [1, 0, 0, 0, 0, 0, 'blue', 'blue', 0, 1], [1, 'cyan', 'cyan', 0, 0, 0, 'blue', 0, 0, 1], [1, 'cyan', 'cyan', 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]], [[1, 1, 1, 1, 1, 1, 1, 1, 1, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 0, 0, 0, 0, 0, 0, 0, 0, 1], [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]]]);

var matrices = [solidBlock, random, questionBlock, tetris, nestedBox, smallBox];

///////////////////////////////////////////////////
////
////  Up from this point is just Matrix definitons
////
///////////////////////////////////////////////////

var DrawMatrix = function () {
  function DrawMatrix() {
    _classCallCheck(this, DrawMatrix);

    // Properties
    this.matrix = 4;
    this.wallText = '';
    this.showWalls = true;
    this.transparentWalls = false;
    this.noShade = false;
    this.brick = false;
    this.color = '#FFFF66';
    this.showAxis = false;

    // Globals
    this.scale = 1;
    this.minZoom = 0.01;
    this.maxZoom = 10;
    this.boxSize = 1;

    // Elements
    this.$view = document.querySelector('.view');
    this.$matrix = document.querySelector('.matrix');

    // initialize
    this.setUpZoom();
    orbit(this.$matrix);
    this.object = matrices[this.matrix];
  }

  _createClass(DrawMatrix, [{
    key: 'reset',
    value: function reset() {
      this.scale = 1;
      this.$view.style.transform = 'scale(' + this.scale + ')';
      this.$matrix.style.transform = 'rotateX(-30deg) rotateY(-45deg)';
    }
  }, {
    key: 'setUpZoom',
    value: function setUpZoom() {
      var _this = this;

      document.body.addEventListener('mousewheel', function (e) {
        _this.scale = _this.scale + e.deltaY / 200;

        if (_this.scale < _this.minZoom) {
          _this.scale = _this.minZoom;
        }
        if (_this.scale > _this.maxZoom) {
          _this.scale = _this.maxZoom;
        }

        _this.$view.style.transform = 'scale(' + _this.scale + ')';
        e.preventDefault();
        return false;
      });
    }
  }, {
    key: 'getVisibleWalls',
    value: function getVisibleWalls(loc) {
      var _this2 = this;

      var check = {
        'N': 'top',
        'E': 'right',
        'S': 'bottom',
        'W': 'left',
        'F': 'front',
        'B': 'back'
      };
      var visible = [];

      Object.keys(check).forEach(function (direction) {
        var _object;

        var newLoc = _this2.object.navigate(loc, direction);
        if (newLoc === null || (_object = _this2.object).get.apply(_object, _toConsumableArray(newLoc)) === 0) {
          // visible
          visible.push(check[direction]);
        }
      });

      return visible;
    }
  }, {
    key: 'getWall',
    value: function getWall(className, value) {
      var div = document.createElement('div');
      div.innerHTML = this.wallText;
      div.className = 'dot wall ' + className;

      if (this.transparentWalls) {
        div.className += ' transparent';
      }

      if (this.noShade) {
        div.className += ' noShade';
      }

      if (this.brick) {
        div.className += ' brick';
      }

      if (this.color) {
        div.style.backgroundColor = this.color;
      }

      if (typeof value === 'string') {
        div.style.backgroundColor = value;
      }

      return div;
    }
  }, {
    key: 'render',
    value: function render() {
      var _this3 = this;

      console.time('draw');
      // Get matrix element, empty inside
      // Set height width to the nubmer of boxes
      this.$matrix.innerHTML = '';
      var axis = document.createElement('div');
      this.$matrix.appendChild(axis);
      axis.className = 'axis';
      axis.innerHTML = '<span>X<span>';
      this.$matrix.style.height = axis.style.height = this.object.rows * this.boxSize + 'em';
      this.$matrix.style.width = axis.style.width = this.object.depth * this.boxSize + 'em';

      var cont = document.createElement('div');
      this.object.forEach(function (val, x, y, z) {
        // if value is not zero or false, draw the box
        if (val !== 0 && val !== false) {
          // create an element on the spot
          // Set it's position on 3D plane
          var div = document.createElement('div');
          if (!_this3.showWalls) {
            div.innerHTML = '&middot;';
          }

          if (_this3.color) {
            div.style.color = _this3.color;
          }

          if (typeof val === 'string') {
            div.style.color = val;
          }

          div.className = 'dot';
          div.style.top = x * 100 / _this3.object.rows + '%';
          div.style.left = y * 100 / _this3.object.depth + '%';
          div.style.transform = 'translateZ(' + (z * _this3.boxSize - _this3.object.cols / 2 + 0.5) + 'em)';

          if (_this3.showWalls) {
            var walls = _this3.getVisibleWalls([x, y, z]);
            walls.forEach(function (wall) {
              div.appendChild(_this3.getWall(wall, val));
            });
          }

          cont.appendChild(div);
        }
      });
      this.$matrix.appendChild(cont);
      console.timeEnd('draw');
    }
  }]);

  return DrawMatrix;
}();

var setMatrix = function setMatrix() {
  drawMatrix.object = matrices[Number(drawMatrix.matrix)];
  drawMatrix.render();
};

var drawMatrix = new DrawMatrix();

/// DAT GUI
var gui = new dat.GUI();

gui.add(drawMatrix, 'wallText').onChange(setMatrix);
gui.add(drawMatrix, 'showWalls').onChange(setMatrix);
gui.add(drawMatrix, 'transparentWalls').onChange(setMatrix);
gui.add(drawMatrix, 'noShade').onChange(setMatrix);
gui.add(drawMatrix, 'brick').onChange(setMatrix);
gui.add(drawMatrix, 'showAxis').onChange(function (val) {
  var cls = 'matrix';
  if (val === false) {
    cls += ' no-axis';
  }
  document.querySelector('.matrix').className = cls;
});
gui.add(drawMatrix, 'matrix', {
  'Solid Block': 0,
  'Random Generated': 1,
  'Question Box': 2,
  'Tetris': 3,
  'Nested Box': 4,
  'Small Box': 5
}).onChange(setMatrix);
gui.add(drawMatrix, 'reset');

// initial render
setMatrix();

Comments