Finish workbench.

Update the entry file for production.

app.js

@@ -1,11 +1,13 @@
 const express = require("express");
+const compression = require("compression");
 
 const app = express();
+app.use(compression());
 const views = `${__dirname}/views/`;
 
-app.get("/garden-bed", (req, res)=>res.sendFile(`${views}/garden-bed/index.html`));
+app.get("/workbench", (req, res)=>res.sendFile(`${views}/workbench/index.html`));
 
-app.get("/garden-bed.js", (req, res)=>res.sendFile(`${views}/garden-bed/index.js`));
+app.get("/workbench.js", (req, res)=>res.sendFile(`${views}/workbench/index.js`));
 
 app.get("/three.js", (req, res)=>res.sendFile(`${__dirname}/threejs/three.min.js`));
 app.get("/orbit-controls.js", (req, res)=>res.sendFile(`${__dirname}/threejs/orbitControls.min.js`));
@@ -14,4 +16,8 @@ app.get("/wood-material.jpg", (req, res)=>res.sendFile(`${views}/dark-wood.jpg`)
 
 app.get("/objects/board.js", (req, res)=>res.sendFile(`${views}/objects/board.js`));
 
-app.listen(8080);
+if(process.env.NODE_ENV === "production"){
+    module.exports = app;
+}else{
+    app.listen(process.env.PORT);
+}

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "compression": "^1.7.4",
         "esbuild": "^0.23.0",
         "express": "^4.19.2"
       }
@@ -468,6 +469,51 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/compressible": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
+      "integrity": "sha512-AF3r7P5dWxL8MxyITRMlORQNaOA2IkAFaTr4k7BUumjPtRpGDTZpl0Pb1XCO6JeDCBdp126Cgs9sMxqSjgYyRg==",
+      "license": "MIT",
+      "dependencies": {
+        "mime-db": ">= 1.43.0 < 2"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/compression": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/compression/-/compression-1.7.4.tgz",
+      "integrity": "sha512-jaSIDzP9pZVS4ZfQ+TzvtiWhdpFhE2RDHz8QJkpX9SIpLq88VueF5jJw6t+6CUQcAoA6t+x89MLrWAqpfDE8iQ==",
+      "license": "MIT",
+      "dependencies": {
+        "accepts": "~1.3.5",
+        "bytes": "3.0.0",
+        "compressible": "~2.0.16",
+        "debug": "2.6.9",
+        "on-headers": "~1.0.2",
+        "safe-buffer": "5.1.2",
+        "vary": "~1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/compression/node_modules/bytes": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/bytes/-/bytes-3.0.0.tgz",
+      "integrity": "sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
+    "node_modules/compression/node_modules/safe-buffer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+      "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==",
+      "license": "MIT"
+    },
     "node_modules/content-disposition": {
       "version": "0.5.4",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.4.tgz",
@@ -944,6 +990,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/on-headers": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.2.tgz",
+      "integrity": "sha512-pZAE+FJLoyITytdqK0U5s+FIpjN0JP3OzFi/u8Rx+EV5/W+JTWGXG8xFzevE7AjBfDqHv/8vL8qQsIhHnqRkrA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/parseurl": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz",

package.json

@@ -10,6 +10,7 @@
   "license": "ISC",
   "description": "",
   "dependencies": {
+    "compression": "^1.7.4",
     "esbuild": "^0.23.0",
     "express": "^4.19.2"
   }

views/garden-bed/index.js

@@ -1,43 +0,0 @@
-import * as three from "three";
-import {OrbitControls} from "orbitControls";
-
-import {CheapBoard, TwoByFour} from "boards";
-
-const canvas = document.getElementById("canvas");
-const renderer = new three.WebGLRenderer({antialias: true, canvas});
-
-const camera = new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
-camera.position.z = 200;
-camera.position.y = 1.8;
-
-const controls = new OrbitControls(camera, renderer.domElement);
-
-const scene = new three.Scene();
-
-const light = new three.DirectionalLight(0xffffff, 3);
-scene.add(light);
-
-const board = new TwoByFour(scene, 96);
-
-function resizeRendererToDisplaySize(renderer){
-    const canvas = renderer.domElement;
-    const width = canvas.clientWidth;
-    const height = canvas.clientHeight;
-    const needResize = canvas.width !== width || canvas.height !== height;
-    if(needResize) renderer.setSize(width, height, false);
-    return needResize;
-}
-
-function render(time){
-    if(resizeRendererToDisplaySize(renderer)){
-        const canvas = renderer.domElement;
-        camera.aspect = canvas.clientWidth / canvas.clientHeight;
-        camera.updateProjectionMatrix();
-    }
-
-    renderer.render(scene, camera);
-    requestAnimationFrame(render);
-}
-
-renderer.render(scene, camera);
-requestAnimationFrame(render);

views/objects/board.js

@@ -1,13 +1,14 @@
 import * as three from "three";
 
-class Board{
-    constructor(scene, height, width, length){
+export default class Board{
+    constructor(scene, width, height, length){
         this.scene = scene;
-        this.height = height;
         this.width = width;
+        this.height = height;
         this.length = length;
+        this.type = `${width}x${height}`;
 
-        const geometry = new three.BoxGeometry(height, width, length);
+        const geometry = new three.BoxGeometry(width, height, length);
         const edges = new three.EdgesGeometry(geometry);
         const lineMaterial = new three.LineBasicMaterial({color: 0xffffff});
         const line = new three.LineSegments(edges, lineMaterial);
@@ -33,16 +34,6 @@ class Board{
         this.board.rotation.z += this.toRadians(z);
     }
 
-    copyBoardData(board){
-        board.position.x = this.board.position.x;
-        board.position.y = this.board.position.y;
-        board.position.z = this.board.position.z;
-
-        board.rotation.x = this.board.rotation.x;
-        board.rotation.y = this.board.rotation.y;
-        board.rotation.z = this.board.rotation.z;
-    }
-
     surfaceArea(){
         let w = this.width;
         let l = this.length;
@@ -54,39 +45,3 @@ class Board{
         return n*(Math.PI/180);
     }
 }
-
-export class CheapBoard extends Board{
-    constructor(scene, length){
-        super(scene, 0.625, 5.5, length);
-    }
-
-    clone(){
-        let newBoard = new CheapBoard(this.scene, this.length);
-        this.copyBoardData(newBoard.board);
-        return newBoard;
-    }
-}
-
-export class TwoByFour extends Board{
-    constructor(scene, length){
-        super(scene, 2, 4, length);
-    }
-
-    clone(){
-        let newBoard = new TwoByFour(this.scene, this.length);
-        this.copyBoardData(newBoard.board);
-        return newBoard;
-    }
-}
-
-export class FourByFour extends Board{
-    constructor(scene, length){
-        super(scene, 4, 4, length);
-    }
-
-    clone(){
-        let newBoard = new TwoByFour(this.scene, this.length);
-        this.copyBoardData(newBoard.board);
-        return newBoard;
-    }
-}

views/objects/cheapBoard.js

@@ -1,58 +0,0 @@
-import * as three from "three";
-import Board from "Board";
-
-export default class CheapBoard extends Board{
-    constructor(scene, length){
-        this.scene = scene;
-        this.dimensions = [0.625, 5.5, length];
-
-        const loader = new three.TextureLoader();
-        const texture = loader.load("/wood-material.jpg", (t)=>{
-            t.wrapS = t.wrapT = three.RepeatWrapping;
-            t.offset.set(0, 0);
-            t.repeat.set(length / 24, 3);
-        });
-        texture.colorSpace = three.SRGBColorSpace;
-
-        const geometry = new three.BoxGeometry(0.625, 5.5, length);
-        const edges = new three.EdgesGeometry(geometry);
-        const lineMaterial = new three.LineBasicMaterial({color: 0xffffff});
-        const line = new three.LineSegments(edges, lineMaterial);
-        const material = new three.MeshBasicMaterial({map: texture});
-        const board = new three.Mesh(geometry, material);
-
-        this.board = new three.Group();
-        this.board.add(board);
-        this.board.add(line);
-
-        scene.add(this.board);
-    }
-
-    translate(x, y, z){
-        this.board.position.x += x;
-        this.board.position.y += y;
-        this.board.position.z += z;
-    }
-
-    rotate(x, y, z){
-        let toRadians = (n)=>n*(Math.PI/180);
-
-        this.board.rotation.x += toRadians(x);
-        this.board.rotation.y += toRadians(y);
-        this.board.rotation.z += toRadians(z);
-    }
-
-    clone(){
-        let newBoard = new CheapBoard(this.scene, this.dimensions[2]);
-        this.copyBoardData(newBoard.board);
-
-        return newBoard;
-    }
-
-    surfaceArea(){
-        let w = this.dimensions[0];
-        let l = this.dimensions[1];
-        let h = this.dimentsions[2];
-        return 2 * ((w * l) + (l * h) + (h * w));
-    }
-}

views/objects/twoByFour.js

@@ -1,64 +0,0 @@
-import * as three from "three";
-
-export default class TwoByFour {
-    constructor(scene, length){
-        this.scene = scene;
-        this.dimensions = [2, 4, length];
-
-        const loader = new three.TextureLoader();
-        const texture = loader.load("/wood-material.jpg", (t)=>{
-            t.wrapS = t.wrapT = three.RepeatWrapping;
-            t.offset.set(0, 0);
-            t.repeat.set(length / 24, 3);
-        });
-        texture.colorSpace = three.SRGBColorSpace;
-
-        const geometry = new three.BoxGeometry(2, 4, length);
-        const edges = new three.EdgesGeometry(geometry);
-        const lineMaterial = new three.LineBasicMaterial({color: 0xffffff});
-        const line = new three.LineSegments(edges, lineMaterial);
-        const material = new three.MeshBasicMaterial({map: texture});
-        const board = new three.Mesh(geometry, material);
-
-        this.board = new three.Group();
-        this.board.add(board);
-        this.board.add(line);
-
-        scene.add(this.board);
-    }
-
-    translate(x, y, z){
-        this.board.position.x += x;
-        this.board.position.y += y;
-        this.board.position.z += z;
-    }
-
-    rotate(x, y, z){
-        let toRadians = (n)=>n*(Math.PI/180);
-
-        this.board.rotation.x += toRadians(x);
-        this.board.rotation.y += toRadians(y);
-        this.board.rotation.z += toRadians(z);
-    }
-
-    clone(){
-        let newBoard = new TwoByFour(this.scene, this.dimensions[2]);
-
-        newBoard.board.position.x = this.board.position.x;
-        newBoard.board.position.y = this.board.position.y;
-        newBoard.board.position.z = this.board.position.z;
-
-        newBoard.board.rotation.x = this.board.rotation.x;
-        newBoard.board.rotation.y = this.board.rotation.y;
-        newBoard.board.rotation.z = this.board.rotation.z;
-
-        return newBoard;
-    }
-
-    surfaceArea(){
-        let w = this.dimensions[0];
-        let l = this.dimensions[1];
-        let h = this.dimentsions[2];
-        return 2 * ((w * l) + (l * h) + (h * w));
-    }
-}

views/garden-bed/index.html → views/workbench/index.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="utf-8">
-    <title>Garden Bed</title>
+    <title>Workbench</title>
     <style>
         *{margin:0;padding:0;box-sizing:border-box;}
         #canvas{height:100vh;width:100vw;display:block;}
@@ -12,13 +12,13 @@
             "imports": {
                 "three": "/three.js",
                 "orbitControls": "/orbit-controls.js",
-                "boards": "/objects/board.js"
+                "board": "/objects/board.js"
             }
         }
     </script>
 </head>
 <body>
     <canvas id="canvas"></canvas>
-    <script type="module" src="/garden-bed.js"></script>
+    <script type="module" src="/workbench.js"></script>
 </body>
 </html>

views/workbench/index.js

@@ -0,0 +1,130 @@
+import * as three from "three";
+import {OrbitControls} from "orbitControls";
+
+import Board from "board";
+
+const canvas = document.getElementById("canvas");
+const renderer = new three.WebGLRenderer({antialias: true, canvas});
+
+const camera = new three.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
+camera.position.z = 200;
+camera.position.y = 1.8;
+
+const controls = new OrbitControls(camera, renderer.domElement);
+
+const scene = new three.Scene();
+
+const light = new three.DirectionalLight(0xffffff, 3);
+scene.add(light);
+
+const container = new three.Group();
+scene.add(container);
+createProject(container, []);
+
+function resizeRendererToDisplaySize(renderer){
+    const canvas = renderer.domElement;
+    const width = canvas.clientWidth;
+    const height = canvas.clientHeight;
+    const needResize = canvas.width !== width || canvas.height !== height;
+    if(needResize) renderer.setSize(width, height, false);
+    return needResize;
+}
+
+function render(time){
+    if(resizeRendererToDisplaySize(renderer)){
+        const canvas = renderer.domElement;
+        camera.aspect = canvas.clientWidth / canvas.clientHeight;
+        camera.updateProjectionMatrix();
+    }
+
+    renderer.render(scene, camera);
+    requestAnimationFrame(render);
+}
+
+renderer.render(scene, camera);
+requestAnimationFrame(render);
+
+function createProject(container, boards){
+    createLegs(boards);
+    let tableTop = new Board(scene, 2, 36, 72);
+    tableTop.translate(0, 18 + (tableTop.width / 2), 0);
+    tableTop.rotate(0, 90, 90);
+
+    //Creating edge boards with 2x4
+    let borderOne = new Board(scene, 2, 4, 72);
+    borderOne.translate(0, 16, 17);
+    borderOne.rotate(0, 90, 0);
+    let borderTwo = new Board(scene, 2, 4, 72);
+    borderTwo.translate(0, 16, -17);
+    borderTwo.rotate(0, 90, 0);
+    let borderThree = new Board(scene, 2, 4, 32);
+    borderThree.translate(35, 16, 0);
+    let borderFour = new Board(scene, 2, 4, 32);
+    borderFour.translate(-35, 16, 0);
+
+    //Add shelf
+    let shelf = new Board(scene, 1, 24, 60);
+    shelf.translate(0, -3.5, 0);
+    shelf.rotate(0, 90, 90);
+    let shelfSupportOne = new Board(scene, 2, 4, 32);
+    shelfSupportOne.translate(-29, -6, 0);
+    let shelfSupportTwo = new Board(scene, 2, 4, 32);
+    shelfSupportTwo.translate(29, -6, 0);
+    let shelfSupportThree = new Board(scene, 2, 4, 56);
+    shelfSupportThree.translate(0, -6, 11);
+    shelfSupportThree.rotate(0, 90, 0);
+    let shelfSupportFour = new Board(scene, 2, 4, 56);
+    shelfSupportFour.translate(0, -6, -11);
+    shelfSupportFour.rotate(0, 90, 0);
+
+    boards.push(
+        tableTop,
+        borderOne, borderTwo, borderThree, borderFour,
+        shelf,
+        shelfSupportOne, shelfSupportTwo, shelfSupportThree, shelfSupportFour
+    );
+
+    computeBoards(boards);
+}
+
+function createLegs(boards){
+    let legs = [];
+    for(let i = 0; i < 4; i++){
+        let leg = new Board(scene, 4, 4, 36);
+        leg.rotate(90, 0, 0);
+        legs.push(leg);
+        boards.push(leg);
+    }
+
+    let posX = 32;
+    let posZ = 14;
+    legs[0].translate(posX, 0, posZ);
+    legs[1].translate(posX, 0, -posZ);
+    legs[2].translate(-posX, 0, posZ);
+    legs[3].translate(-posX, 0, -posZ);
+
+    return legs;
+}
+
+function computeBoards(boards){
+    let boardsObj = {
+        totalSurfaceArea: 0
+    };
+    let allItems = "";
+    for(let i = 0; i < boards.length; i++){
+        if(boardsObj[boards[i].type]){
+            boardsObj[boards[i].type].count++;
+            boardsObj[boards[i].type].totalLength += boards[i].length;
+        }else{
+            boardsObj[boards[i].type] = {
+                count: 1,
+                totalLength: boards[i].length
+            }
+        }
+        boardsObj.totalSurfaceArea += boards[i].surfaceArea();
+        allItems += `${boards[i].type}x${boards[i].length}\n`;
+    }
+
+    console.log(boardsObj);
+    console.log(allItems);
+}