I don't know...

app.js

@@ -10,4 +10,8 @@ app.get("/garden-bed.js", (req, res)=>res.sendFile(`${views}/garden-bed/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`));
 
+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);

views/garden-bed/index.html

@@ -10,8 +10,9 @@
     <script type="importmap">
         {
             "imports": {
-                "three": "/three.min.js",
-                "orbitControls": "/orbitControls.min.js"
+                "three": "/three.js",
+                "orbitControls": "/orbit-controls.js",
+                "boards": "/objects/board.js"
             }
         }
     </script>

views/garden-bed/index.js

@@ -1,12 +1,13 @@
-//import * as three from "three";
-//import {OribitControls} from "orbitControls";
+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.PerpectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
-camera.position.z = 5;
+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);
@@ -16,15 +17,27 @@ const scene = new three.Scene();
 const light = new three.DirectionalLight(0xffffff, 3);
 scene.add(light);
 
-const floorGom = new three.PlaneGeometry(100, 100);
-const loader = new three.TextureLoader();
-const floorTex = loader.load("./americanChestnut.jpg", (t)=>{
-    t.wrapS = t.wrapT = three.RepeatWrapping;
-    t.offset.set(0, 0);
-    t.repeat.set(10, 10);
-});
-floorTex.colorSpace = three.SRGBColorSpace;
-const floorMat = new three.MeshBasicMaterial({map: floorTex});
-const floor = new three.Mesh(floorGom, floorMat);
-floor.rotation.x = -(Math.PI / 2);
-scene.add(floor);
+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

@@ -0,0 +1,92 @@
+import * as three from "three";
+
+class Board{
+    constructor(scene, height, width, length){
+        this.scene = scene;
+        this.height = height;
+        this.width = width;
+        this.length = length;
+
+        const geometry = new three.BoxGeometry(height, width, 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);
+
+        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){
+        this.board.rotation.x += this.toRadians(x);
+        this.board.rotation.y += this.toRadians(y);
+        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;
+        let h = this.height;
+        return 2*((w*l)+(l*h)+(h*w));
+    }
+
+    toRadians(n){
+        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

@@ -0,0 +1,58 @@
+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

@@ -0,0 +1,64 @@
+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));
+    }
+}