THREE.BoxGeometry problems

HTML

<body>Size <select id="size"><option>2</option><option>3</option></select></body>
<script src="https://threejs.org/build/three.js"></script>
<script src="https://gamingJS.com/Mouse.js"></script>
<script src="https://gamingJS.com/ChromeFixes.js"></script>
<script>
  /**
   * @author CappuccinoScript
   * @inspiration Rubik Erno
   * cube order FLU(0) FRU FLD FRD BLU BRU(5) BLD BRD FU FL FR(10) FD UL UR DL DR(15) BU BL BR BD F(20) B U D L R(25)
   */
  var face, size = document.getElementById('size').value, stickers = size*size*6, spinner = new THREE.Object3D();
  
  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  // This will draw what the camera sees onto the screen:
  //var renderer = new THREE.CanvasRenderer();
  //renderer.setSize(window.innerWidth, window.innerHeight);
  //document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
  var stickers = [], loop, color, cubelets = [];
  while (loop<stickers) {
    color = 
    loop % 6 === 0 ? 0xf00 :
    loop % 6 == 1 ? 0xff8000 :
    loop % 6 == 2 ? 0xff0 :
    loop % 6 == 3 ? 0x0f0 :
    loop % 6 == 4 ? 0x0080ff : 0x000;
    stickers.push(
      THREE.Mesh(
        THREE.PlaneGeometry(90,90),
        THREE.MeshBasicMaterial({
          color: color  
        })
      )
    );
    loop++;
  }
  
  loop = 0;
  
  while (loop<26) {
    cubelets.push(THREE.Mesh(
    THREE.MeshBasicMaterial({color: 0x000})
    ));
    
  }
    
    var stack = [];
onkeydown = onkeyup = function(e){
    e = e || event; // to deal with IE
    stack[e.keyCode] = e.type == 'keydown';
};

function rotateFace(face, dir) {
  if (face === 'F' || face === 'L' || face === 'U') spinner.add(cubelets[0]);
  if (face === 'F' || face === 'R' || face === 'U')...

JavaScript

/**
   * @author CappuccinoScript
   * @inspiration Rubik Erno
   * cube order FLU(0) FRU FLD FRD BLU BRU(5) BLD BRD FU FL FR(10) FD UL UR DL DR(15) BU BL BR BD F(20) B U D L R(25)
   */
  var face, size = document.getElementById('size').value, stickers = size*size*6, spinner = new THREE.Object3D();
  
  // This is where stuff in our game will happen:
  var scene = new THREE.Scene();

  // This is what sees the stuff:
  var aspect_ratio = window.innerWidth / window.innerHeight;
  var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
  camera.position.z = 500;
  scene.add(camera);

  // This will draw what the camera sees onto the screen:
  var renderer = new THREE.CanvasRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  // ******** START CODING ON THE NEXT LINE ********
  var stickers = [], loop, color, cubelets = [];
  while (loop<stickers) {
    color = 
    loop % 6 === 0 ? 0xf00 :
    loop % 6 == 1 ? 0xff8000 :
    loop % 6 == 2 ? 0xff0 :
    loop % 6 == 3 ? 0x0f0 :
    loop % 6 == 4 ? 0x0080ff : 0x000;
    stickers.push(
      THREE.Mesh(
        THREE.PlaneGeometry(90,90),
        THREE.MeshBasicMaterial({
          color: color  
        })
      )
    );
    loop++;
  }
  
  loop = 0;
  
  while (loop<26) {
    cubelets.push(THREE.Mesh(
    THREE.MeshBasicMaterial({color: 0x000})
    ));
    
  }
    
    var stack = [];
onkeydown = onkeyup = function(e){
    e = e || event; // to deal with IE
    stack[e.keyCode] = e.type == 'keydown';
};

function rotateFace(face, dir) {
  if (face === 'F' || face === 'L' || face === 'U') spinner.add(cubelets[0]);
  if (face === 'F' || face === 'R' || face === 'U') spinner.add(cubelets[1]);
  if (face === 'F' || face === 'L' || face === 'D') spinner.add(cubelets[2]);
  if (face === 'F' || face === 'R' || face === 'D') spinner.add(cubelets[3]);
  if (face === 'B' || face === 'L' || face === 'U') spinner.add(cubelets[4]);
  if (face...