orientation of top, bottom, left, right faces changed

this way we can actually describe how to scan the box properly

README.md

@@ -37,3 +37,9 @@ Click and hold the right mouse button and move it around to move the box around.
 Use <kbd>W</kbd><kbd>A</kbd><kbd>S</kbd><kbd>D</kbd> or cursor keys to move the box around.
 
 Use the mouse wheel to zoom in/out.
+
+## How to scan your box sides
+
+Scan the front and back of the box as if you would scan a letter or document.
+
+Scan the other sides (top, bottom, left and right) while the front of the box is facing towards you while operating the scanner.

bigbox3d.js

@@ -49,16 +49,19 @@ function calculateDimensions() {
 
     console.log('texturen:', texturen);
 
-    // var width_absolute = image_sources[tex_front].width + image_sources[tex_back].width + image_sources[tex_top].width + image_sources[tex_bottom].width;
-    const width_absolute = texturen[enmFaces.front].image.width + texturen[enmFaces.back].image.width + texturen[enmFaces.top].image.width + texturen[enmFaces.bottom].image.width;
+    // const width_absolute = image_sources[tex_front].width + image_sources[tex_back].width + image_sources[tex_top].width + image_sources[tex_bottom].width;
+    // const width_absolute = texturen[enmFaces.front].image.width + texturen[enmFaces.back].image.width + texturen[enmFaces.top].image.width + texturen[enmFaces.bottom].image.width;
+    const width_absolute = texturen[enmFaces.front].image.width + texturen[enmFaces.back].image.width + texturen[enmFaces.top].image.height + texturen[enmFaces.bottom].image.height;
     const width_mean = width_absolute / 4;
 
-    // var height_absolute = image_sources[tex_front].height + image_sources[tex_back].height + image_sources[tex_left].height + image_sources[tex_right].height;
-    const height_absolute = texturen[enmFaces.front].image.height + texturen[enmFaces.back].image.height + texturen[enmFaces.left].image.width + texturen[enmFaces.right].image.width;
+    // const height_absolute = image_sources[tex_front].height + image_sources[tex_back].height + image_sources[tex_left].height + image_sources[tex_right].height;
+    // const height_absolute = texturen[enmFaces.front].image.height + texturen[enmFaces.back].image.height + texturen[enmFaces.left].image.width + texturen[enmFaces.right].image.width;
+    const height_absolute = texturen[enmFaces.front].image.height + texturen[enmFaces.back].image.height + texturen[enmFaces.left].image.height + texturen[enmFaces.right].image.height;
     const height_mean = height_absolute / 4;
 
-    // var depth_absolute = image_sources[tex_top].height + image_sources[tex_bottom].height + image_sources[tex_left].width + image_sources[tex_right].width;
-    const depth_absolute = texturen[enmFaces.top].image.height + texturen[enmFaces.bottom].image.height + texturen[enmFaces.left].image.height + texturen[enmFaces.right].image.height;
+    // const depth_absolute = image_sources[tex_top].height + image_sources[tex_bottom].height + image_sources[tex_left].width + image_sources[tex_right].width;
+    // const depth_absolute = texturen[enmFaces.top].image.height + texturen[enmFaces.bottom].image.height + texturen[enmFaces.left].image.height + texturen[enmFaces.right].image.height;
+    const depth_absolute = texturen[enmFaces.top].image.width + texturen[enmFaces.bottom].image.width + texturen[enmFaces.left].image.width + texturen[enmFaces.right].image.width;
     const depth_mean = depth_absolute / 4;
 
     console.log('width_mean:', width_mean);
@@ -268,28 +271,28 @@ function initBuffers() {
         1.0 * dimensions.width, -1.0 * dimensions.height, -1.0 * dimensions.depth,
 
         // Top face
-        -1.0 * dimensions.width, 1.0 * dimensions.height, -1.0 * dimensions.depth,
         -1.0 * dimensions.width, 1.0 * dimensions.height, 1.0 * dimensions.depth,
         1.0 * dimensions.width, 1.0 * dimensions.height, 1.0 * dimensions.depth,
         1.0 * dimensions.width, 1.0 * dimensions.height, -1.0 * dimensions.depth,
+        -1.0 * dimensions.width, 1.0 * dimensions.height, -1.0 * dimensions.depth,
 
         // Bottom face
+        -1.0 * dimensions.width, -1.0 * dimensions.height, 1.0 * dimensions.depth,
         -1.0 * dimensions.width, -1.0 * dimensions.height, -1.0 * dimensions.depth,
         1.0 * dimensions.width, -1.0 * dimensions.height, -1.0 * dimensions.depth,
         1.0 * dimensions.width, -1.0 * dimensions.height, 1.0 * dimensions.depth,
-        -1.0 * dimensions.width, -1.0 * dimensions.height, 1.0 * dimensions.depth,
 
         // Right face
-        1.0 * dimensions.width, -1.0 * dimensions.height, -1.0 * dimensions.depth,
         1.0 * dimensions.width, 1.0 * dimensions.height, -1.0 * dimensions.depth,
         1.0 * dimensions.width, 1.0 * dimensions.height, 1.0 * dimensions.depth,
         1.0 * dimensions.width, -1.0 * dimensions.height, 1.0 * dimensions.depth,
+        1.0 * dimensions.width, -1.0 * dimensions.height, -1.0 * dimensions.depth,
 
         // Left face
+        -1.0 * dimensions.width, 1.0 * dimensions.height, -1.0 * dimensions.depth,
         -1.0 * dimensions.width, -1.0 * dimensions.height, -1.0 * dimensions.depth,
         -1.0 * dimensions.width, -1.0 * dimensions.height, 1.0 * dimensions.depth,
         -1.0 * dimensions.width, 1.0 * dimensions.height, 1.0 * dimensions.depth,
-        -1.0 * dimensions.width, 1.0 * dimensions.height, -1.0 * dimensions.depth,
     ];
     gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);