ソースを参照

Create patio table outline.

Lee Morgan 1 年間 前
コミット
f4abedbcaf

+ 3 - 0
app.js

@@ -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

@@ -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

@@ -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

@@ -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