woodworking/views/objects/Board.js

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())
    }
}