Recreate Board class to use custom vertices.

app.js

@@ -19,8 +19,8 @@ app.get("/css-2d-renderer.js", (req, res)=>res.sendFile(`${__dirname}/threejs/CS
 
 app.get("/image/workbench.webp", (req, res)=>res.sendFile(`${views}/image/workbench.webp`));
 
-app.get("/objects/board.js", (req, res)=>res.sendFile(`${views}/objects/board.js`));
 app.get("/objects/setup.js", (req, res)=>res.sendFile(`${views}/objects/setup.js`));
+app.get("/objects/board.js", (req, res)=>res.sendFile(`${views}/objects/Board.js`));
 
 if(process.env.NODE_ENV === "production"){
     module.exports = app;

views/objects/Board.js

@@ -0,0 +1,128 @@
+import * as three from "three";
+import {CSS2DObject} from "2dRenderer";
+
+export default class Board{
+    constructor(scene, width, height, length, boardList, degree=90, angleSide="width"){
+        this.scene = scene;
+        this.width = width;
+        this.height = height;
+        this.length = length;
+        this.type = `${width}x${height}`;
+        this.board = new three.Group();
+
+        const faces = new Float32Array(this.faces(this.vertices(width/2, height/2, length/2)));
+        const geometry = new three.BufferGeometry();
+        geometry.setDrawRange(0, Infinity);
+        geometry.setAttribute("position", new three.BufferAttribute(faces, 3));
+        const material = new three.MeshBasicMaterial({color: 0x7a4300});
+        material.side = three.DoubleSide;
+        this.drawEdges(this.vertices(width/2, height/2, length/2), this.edges(), this.board);
+        this.createLabel();
+
+        this.board.add(new three.Mesh(geometry, material));
+
+        scene.add(this.board);
+        boardList.push(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){
+        this.board.rotation.x += this.toRadians(x);
+        this.board.rotation.y += this.toRadians(y);
+        this.board.rotation.z += this.toRadians(z);
+    }
+
+    surfaceArea(){
+        let w = this.width;
+        let l = this.length;
+        let h = this.height;
+        return 2*((w*l)+(l*h)+(h*w));
+    }
+
+    toRadians(n){
+        return n*(Math.PI/180);
+    }
+
+    createLabel(){
+        const labelElem = document.createElement("div");
+        labelElem.classList.add("label");
+        labelElem.textContent = `${this.type}x${this.length} in.`;
+        labelElem.style.backgroundColor = "transparent";
+
+        const label = new CSS2DObject(labelElem);
+        label.position.set(0, 0, 0);
+        label.center.set(0, 1);
+        label.layers.set(0);
+        this.board.add(label);
+        return label;
+    }
+
+    vertices(w, h, l){
+        return [
+            [w, h, l],
+            [w, -h, l],
+            [-w, -h, l],
+            [-w, h, l],
+            [w, h, -l],
+            [w, -h, -l],
+            [-w, -h, -l],
+            [-w, h, -l],
+        ];
+    }
+
+    edges(){
+        return [
+            [0, 4],
+            [1, 5],
+            [2, 6],
+            [3, 7],
+            [0, 1],
+            [3, 2],
+            [4, 5],
+            [7, 6],
+            [0, 3],
+            [1, 2],
+            [4, 7],
+            [5, 6]
+        ];
+    }
+
+    faces(v){
+            //Ends
+        return v[0].concat(v[1]).concat(v[2])
+            .concat(v[2]).concat(v[3]).concat(v[0])
+            .concat(v[4]).concat(v[5]).concat(v[6])
+            .concat(v[6]).concat(v[7]).concat(v[4])
+            //Sides
+            .concat(v[0]).concat(v[3]).concat(v[4])
+            .concat(v[3]).concat(v[7]).concat(v[4])
+            .concat(v[1]).concat(v[2]).concat(v[5])
+            .concat(v[2]).concat(v[6]).concat(v[5])
+            //Largest side
+            .concat(v[0]).concat(v[1]).concat(v[5])
+            .concat(v[0]).concat(v[4]).concat(v[5])
+            .concat(v[2]).concat(v[3]).concat(v[7])
+            .concat(v[2]).concat(v[6]).concat(v[7]);
+    }
+
+    drawEdges(v, e, b){
+        for(let i = 0; i < e.length; i++){
+            let coords = new Float32Array(v[e[i][0]].concat(v[e[i][1]]));
+            const geometry = new three.BufferGeometry();
+            geometry.setAttribute("position", new three.BufferAttribute(coords, 3));
+            const wireframe = new three.WireframeGeometry(geometry);
+            const line = new three.LineSegments(wireframe);
+            line.material.depthTest = true;
+            line.material.opacity = 0.5;
+            line.material.transparent = true;
+            b.add(line);
+        }
+        const geometry = new three.BufferGeometry();
+        geometry.setAttribute("position", new three.BufferAttribute())
+    }
+}

views/objects/board.js

@@ -1,67 +0,0 @@
-import * as three from "three";
-import {CSS2DObject} from "2dRenderer";
-
-export default class Board{
-    constructor(scene, width, height, length, boardList){
-        this.scene = scene;
-        this.width = width;
-        this.height = height;
-        this.length = length;
-        this.type = `${width}x${height}`;
-
-        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);
-        const material = new three.MeshBasicMaterial({color: 0x7a4300});
-        const board = new three.Mesh(geometry, material);
-
-        this.board = new three.Group();
-        this.board.add(board);
-        this.board.add(line);
-
-        this.label = this.createLabel(board);
-
-        scene.add(this.board);
-
-        if(boardList) boardList.push(this);
-    }
-
-    translate(x, y, z){
-        this.board.position.x += x;
-        this.board.position.y += y;
-        this.board.position.z += z;
-    }
-
-    rotate(x, y, z){
-        this.board.rotation.x += this.toRadians(x);
-        this.board.rotation.y += this.toRadians(y);
-        this.board.rotation.z += this.toRadians(z);
-    }
-
-    surfaceArea(){
-        let w = this.width;
-        let l = this.length;
-        let h = this.height;
-        return 2*((w*l)+(l*h)+(h*w));
-    }
-
-    toRadians(n){
-        return n*(Math.PI/180);
-    }
-
-    createLabel(board){
-        const labelElem = document.createElement("div");
-        labelElem.classList.add("label");
-        labelElem.textContent = `${this.type}x${this.length} in.`;
-        labelElem.style.backgroundColor = "transparent";
-
-        const label = new CSS2DObject(labelElem);
-        label.position.set(0, 0, 0);
-        label.center.set(0, 1);
-        board.add(label);
-        label.layers.set(0);
-
-        return label;
-    }
-}

views/patioTable/patioTable.html

@@ -15,7 +15,7 @@
                     "three": "/three.js",
                     "orbitControls": "/orbit-controls.js",
                     "2dRenderer": "/css-2d-renderer.js",
-                    "board": "/objects/board.js",
+                    "Board": "/objects/board.js",
                     "setup": "/objects/setup.js"
                 }
             }

views/patioTable/patioTable2.js

@@ -0,0 +1,9 @@
+import {scene, Group, compute} from "setup";
+import Board from "Board";
+import * as three from "three";
+
+const boards = [];
+
+console.time("something");
+const board = new Board(scene, 2, 4, 50, boards);
+console.timeEnd("something");