Home Verkennen Help
Registreren Inloggen
lee
/
woodworking
1
0
Vork 0
Bestanden Issues 0 Pull-aanvragen 0 Wiki
Bladeren bron

Create patio table outline.

Lee Morgan 1 jaar geleden
bovenliggende
a243bb5f6e
commit
f4abedbcaf
5 gewijzigde bestanden met toevoegingen van 91 en 0 verwijderingen
Zij-aan-zij weergave Toon Diff Stats
  1. 3 0
      app.js
  2. 3 0
      views/objects/setup.js
  3. 31 0
      views/patioTable/patioTable.html
  4. 54 0
      views/patioTable/patioTable.js
  5. 0 0
      views/patioTable/patioTable2.js

+ 3 - 0
app.js
Bestand weergeven 

@@ -10,6 +10,9 @@ app.get("/", (req, res)=>res.sendFile(`${views}/index.html`));
 
 app.get("/workbench", (req, res)=>res.sendFile(`${views}/workbench/index.html`));
 
 app.get("/workbench.js", (req, res)=>res.sendFile(`${views}/workbench/workbench.js`));
 
 
+app.get("/patio-table", (req, res)=>res.sendFile(`${views}/patioTable/patioTable.html`));
 
+app.get("/patio-table.js", (req, res)=>res.sendFile(`${views}/patioTable/patioTable2.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("/css-2d-renderer.js", (req, res)=>res.sendFile(`${__dirname}/threejs/CSS2DRenderer.min.js`));

+ 3 - 0
views/objects/setup.js
Bestand weergeven 

@@ -51,7 +51,9 @@ export function compute(boards){
 
     console.time("thing");
 
     let specs = document.getElementById("specs");
 
     let data = {};
 
+    let surfaceArea = 0;
 
     for(let i = 0; i < boards.length; i++){
 
+        surfaceArea += boards[i].surfaceArea();
 
         if(data[boards[i].type]){
 
             data[boards[i].type].totalLength += boards[i].length;
 
             data[boards[i].type].lengths.push(boards[i].length);
 
@@ -75,6 +77,7 @@ export function compute(boards){
 
 
     const boardListTable = createTable(boardList);
 
     specs.appendChild(boardListTable);
 
+    console.log(surfaceArea);
 
 }
 
 
 function createTable(data){

+ 31 - 0
views/patioTable/patioTable.html
Bestand weergeven 

@@ -0,0 +1,31 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+    <head>
 
+        <meta charset="utf-8">
 
+        <title>Patio Table</title>
 
+        <style>
 
+            *{margin:0;padding:0;box-sizing:border-box;}
 
+            #canvas{height:100vh;width:100vw;display:block;}
 
+            .label{color:#ffffff;font-family:sans-serif;padding:2px;background:rgba(0,0,0,0.6);font-size:10px;}
 
+            #specs{height:100%;width:250px;position:fixed;top:0;left:0;background:rgb(200,200,200);overflow:auto;}
 
+        </style>
 
+        <script type="importmap">
 
+            {
 
+                "imports": {
 
+                    "three": "/three.js",
 
+                    "orbitControls": "/orbit-controls.js",
 
+                    "2dRenderer": "/css-2d-renderer.js",
 
+                    "board": "/objects/board.js",
 
+                    "setup": "/objects/setup.js"
 
+                }
 
+            }
 
+        </script>
 
+    </head>
 
+    <body>
 
+        <canvas id="canvas"></canvas>
 
+        <div id="specs">
 
+            <h3>Materials</h3>
 
+        </div>
 
+        <script type="module" src="/patio-table.js"></script>
 
+    </body>
 
+</html>

+ 54 - 0
views/patioTable/patioTable.js
Bestand weergeven 

@@ -0,0 +1,54 @@
 
+import {scene, Group, compute} from "setup";
 
+import Board from "board";
 
+
 
+const boards = [];
 
+
 
+createLegs();
 
+createTop();
 
+
 
+let borderOne = new Board(scene, 2, 4, 36, boards);
 
+borderOne.translate(19, 15, 0);
 
+
 
+let borderTwo = new Board(scene, 2, 4, 36, boards);
 
+borderTwo.translate(-19, 15, 0);
 
+
 
+let borderThree = new Board(scene, 2, 4, 40, boards);
 
+borderThree.translate(0, 15, 19);
 
+borderThree.rotate(0, 90, 0);
 
+
 
+let borderFour = new Board(scene, 2, 4, 40, boards);
 
+borderFour.translate(0, 15, -19);
 
+borderFour.rotate(0, 90, 0);
 
+
 
+function createLegs(){
 
+    let legs = [];
 
+    for(let i = 0; i < 4; i++){
 
+        let leg = new Board(scene, 4, 4, 30, boards);
 
+        leg.rotate(90, 0, 0);
 
+        legs.push(leg);
 
+    }
 
+
 
+    let posX = 16;
 
+    let posZ = 16;
 
+    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 createTop(){
 
+    let top = [];
 
+    let leftShift = 15;
 
+    for(let i = 0; i < 6; i++){
 
+        let board = new Board(scene, 2, 6, 36, boards);
 
+        board.translate(0, 16, leftShift - (i * 6));
 
+        board.rotate(0, 90, 90);
 
+        top.push(board);
 
+    }
 
+
 
+    return top;
 
+}
 
+
 
+compute(boards);

+ 0 - 0
views/patioTable/patioTable2.js
Bestand weergeven