canvas {
  display: block;
}

const boxes = [
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,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,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,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,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,1,0,0,
  0,0,0,0,0,0,0,1,0,0,
  0,0,0,2,0,1,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,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,2,2,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,

  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,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,1,0,0,
  0,0,2,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,

  0,0,0,0,0,0,0,0,0,0,
  0,0,0,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,1,1,
  0,0,0,0,0,0,0,1,0,0,
  2,2,2,2,1,1,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,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,2,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,

  0,0,0,0,0,0,0,0,0,0,
  0,0,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,1,1,0,
  0,0,0,0,0,0,1,1,1,0,
  0,0,2,2,0,0,1,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,0,0,0,0,0,0,
  0,0,0,0,0,0,1,1,1,0,
  0,0,0,0,0,0,1,1,1,0,
  0,0,0,2,0,0,1,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,0,0,0,0,0,0,
  0,0,0,0,0,0,1,1,1,0,
  0,0,0,0,0,0,1,1,1,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,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0,
  0,0,0,0,0,0,0,0,0,0
];
const size = 1;
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer({
  antialias: true
});
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 100);
const light = new THREE.DirectionalLight(0xFFFFFF);
const geometry = new THREE.BoxGeometry(size, size, size);
const interval = 10;
const group = new THREE.Group();
let material;
let j = 0;

camera.position.set(size / 2, 0, Math.cbrt(boxes.length) * 4);
light.position.set(0, 100, 100);
scene.add(light);

for (let i = 0; i < boxes.length; ++i) {
  ((i) => {
    switch (boxes[i]) {
      case 0:
        return;
        break;
      case 1:
        material = new THREE.MeshLambertMaterial({
          color: 0xFFFFFF
        });
        break;
      case 2:
        material = new THREE.MeshLambertMaterial({
          color: 0x888888
        });
        break;
    }
    
    const cube = new THREE.Mesh(geometry, material);
    const pos = getPosition(i);
    
    cube.position.set(
      pos.x * size,
      pos.y * size,
      pos.z * size
    );

    setTimeout(() => {
      group.add(cube);
    }, j * interval);
    
    ++j;
  })(i);
}

const pivot = new THREE.Group();

group.position.set(-5, -5, -5);

pivot.add(group);
scene.add(pivot);

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

render();

function getPosition(i) {
  const length = boxes.length;

  const x = i % Math.cbrt(length);
  const y = 0 | i / Math.pow(Math.cbrt(length), 2);
  const z = 0 | i / Math.cbrt(length) % Math.cbrt(length);
  
  return { x, y, z };
}

function render() {
  pivot.rotation.y += .01;
  renderer.render(scene, camera);
  requestAnimationFrame(render);
}