examples

dividab · Jun 5, 2024 · 1afade9 · 1afade9
1 parent 95e4ad8
commit 1afade9
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 49 deletions.
diff --git a/packages/abstract-3d/src/renderers/react/react-mesh.tsx b/packages/abstract-3d/src/renderers/react/react-mesh.tsx
@@ -30,7 +30,7 @@ const boxGeometry = new BoxGeometry();
 const cylinderGeometry = new CylinderGeometry(1, 1, 1, 40, 1);
 const coneGeometry = new ConeGeometry(1, 1, 16, 1);
 const planeGeometry = new PlaneGeometry();
-const sphereGeometry = new SphereGeometry(1, 9, 9);
+const sphereGeometry = new SphereGeometry(1, 12, 12);
 export const euler = new Euler();
 export const vector3 = new Vector3();
 export const quaternion = new Quaternion();

diff --git a/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-box.ts b/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-box.ts
@@ -7,8 +7,8 @@ export function box(
   b: A3D.Box,
   point: (x: number, y: number) => A3D.Vec2,
   color: string,
-  onlyStroke: boolean,
-  grayScale: boolean,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
   stroke: number,
   onlyStrokeFill: string,
   parentPos: A3D.Vec3,

diff --git a/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-cone.ts b/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-cone.ts
@@ -7,8 +7,8 @@ export function cone(
   c: A3D.Cone,
   point: (x: number, y: number) => A3D.Vec2,
   color: string,
-  onlyStroke: boolean,
-  grayScale: boolean,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
   _stroke: number,
   onlyStrokeFill: string,
   parentPos: A3D.Vec3,

diff --git a/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-cylinder.ts b/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-cylinder.ts
@@ -7,8 +7,8 @@ export function cylinder(
   c: A3D.Cylinder,
   point: (x: number, y: number) => A3D.Vec2,
   color: string,
-  onlyStroke: boolean,
-  grayScale: boolean,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
   _stroke: number,
   onlyStrokeFill: string,
   parentPos: A3D.Vec3,

diff --git a/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-line.ts b/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-line.ts
@@ -7,7 +7,7 @@ export function line(
   l: A3D.Line,
   point: (x: number, y: number) => A3D.Vec2,
   fill: string,
-  grayScale: boolean,
+  grayScale: boolean | undefined,
   _stroke: number,
   parentPos: A3D.Vec3,
   parentRot: A3D.Vec3

diff --git a/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-plane.ts b/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-plane.ts
@@ -7,8 +7,8 @@ export function plane(
   p: A3D.Plane,
   point: (x: number, y: number) => A3D.Vec2,
   color: string,
-  onlyStroke: boolean,
-  grayScale: boolean,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
   _stroke: number,
   onlyStrokeFill: string,
   parentPos: A3D.Vec3,

diff --git a/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-polygon.ts b/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-polygon.ts
@@ -7,8 +7,8 @@ export function polygon(
   p: Polygon,
   point: (x: number, y: number) => Vec2,
   color: string,
-  onlyStroke: boolean,
-  grayScale: boolean,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
   onlyStrokeFill: string,
   _stroke: number,
   parentPos: Vec3,

diff --git a/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-shape.ts b/packages/abstract-3d/src/renderers/svg/svg-geometries/svg-shape.ts
@@ -7,8 +7,8 @@ export function shape(
   s: Shape,
   point: (x: number, y: number) => Vec2,
   color: string,
-  onlyStroke: boolean,
-  grayScale: boolean,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
   onlyStrokeFill: string,
   _stroke: number,
   parentPos: Vec3,

diff --git a/packages/abstract-3d/src/renderers/svg/svg.ts b/packages/abstract-3d/src/renderers/svg/svg.ts
@@ -29,13 +29,13 @@ import { EmbededImage, svg } from "./svg-encoding";
 export function toSvg(
   scene: Scene,
   view: View,
-  onlyStroke: boolean,
-  grayScale: boolean,
   stroke: number,
+  scale?: { readonly size: number; readonly scaleByWidth: boolean },
+  onlyStroke?: boolean,
+  grayScale?: boolean,
   onlyStrokeFill: string = "rgba(255,255,255,0)",
   font: string = "",
-  buffers?: Record<string, string>,
-  scale?: { readonly size: number; readonly scaleByWidth: boolean }
+  buffers?: Record<string, string>
 ): { readonly image: string; readonly width: number; readonly height: number } {
   const factor = scale
     ? scale.size /
@@ -106,8 +106,8 @@ function svgGroup(
   point: (x: number, y: number) => Vec2,
   view: View,
   factor: number,
-  onlyStroke: boolean,
-  grayScale: boolean,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
   onlyStrokeFill: string,
   font: string,
   stroke: number,
@@ -156,8 +156,8 @@ function svgMesh(
   view: View,
   factor: number,
   color: string,
-  onlyStroke: boolean,
-  grayScale: boolean,
+  onlyStroke: boolean | undefined,
+  grayScale: boolean | undefined,
   background: string,
   font: string,
   stroke: number,

diff --git a/packages/abstract-visuals-example/package.json b/packages/abstract-visuals-example/package.json
@@ -21,13 +21,15 @@
     "abstract-document": "^11.1.0",
     "abstract-image": "^8.1.0",
     "abstract-3d": "^0.1.0",
+    "file-saver": "^2.0.5",
     "base64-js": "^1.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@types/base64-js": "^1.3.2",
     "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0"
+    "@types/react-dom": "^18.3.0",
+    "@types/file-saver": "^2.0.7"
   }
 }
diff --git a/packages/abstract-visuals-example/src/app/abstract-3d-example-react.tsx b/packages/abstract-visuals-example/src/app/abstract-3d-example-react.tsx
diff --git a/packages/abstract-visuals-example/src/app/abstract-3d-example.tsx b/packages/abstract-visuals-example/src/app/abstract-3d-example.tsx
@@ -0,0 +1,76 @@
+import * as React from "react";
+import FileSaver from "file-saver";
+import * as A3D from "abstract-3d";
+
+export function Abstract3DExample(): React.ReactNode {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
+      <div style={{ display: "flex", height: "20px", background: "rgb(251,  251, 251)" }}>
+        <button
+          onClick={() => FileSaver.saveAs(new Blob([A3D.toDxf(scene, "front")], { type: "text/plain" }), `a3d.dxf`)}
+        >
+          DXF
+        </button>
+        <button onClick={() => FileSaver.saveAs(new Blob([A3D.toStl(scene)], { type: "text/plain" }), `a3d.stl`)}>
+          STL
+        </button>
+        <button
+          onClick={() =>
+            FileSaver.saveAs(
+              new Blob([A3D.toSvg(scene, "front", 2, { size: 180, scaleByWidth: true }).image], { type: "text/plain" }),
+              `a3d.svg`
+            )
+          }
+        >
+          SVG
+        </button>
+      </div>
+      <div style={{ height: "calc(100% - 20px)" }}>
+        <A3D.toReact scene={scene} />
+      </div>
+    </div>
+  );
+}
+
+const scene: A3D.Scene = {
+  center: A3D.vec3Zero,
+  size: A3D.vec3(40, 40, 40),
+  groups: [
+    {
+      pos: A3D.vec3Zero,
+      meshes: [
+        A3D.box(
+          A3D.vec3(10, 2, 10),
+          { type: "Phong", hover: "rgb(50,50,50)", normal: "rgb(150,150,150)" },
+          A3D.vec3(0, -6, 0)
+        ),
+        A3D.box(
+          A3D.vec3(1, 10, 1),
+          { type: "Phong", hover: "rgb(50,50,50)", normal: "rgb(150,150,150)" },
+          A3D.vec3(-4.5, 0, 4.5)
+        ),
+        A3D.box(
+          A3D.vec3(1, 10, 1),
+          { type: "Phong", hover: "rgb(50,50,50)", normal: "rgb(150,150,150)" },
+          A3D.vec3(4.5, 0, 4.5)
+        ),
+        A3D.box(
+          A3D.vec3(1, 10, 1),
+          { type: "Phong", hover: "rgb(50,50,50)", normal: "rgb(150,150,150)" },
+          A3D.vec3(-4.5, 0, -4.5)
+        ),
+        A3D.box(
+          A3D.vec3(1, 10, 1),
+          { type: "Phong", hover: "rgb(50,50,50)", normal: "rgb(150,150,150)" },
+          A3D.vec3(4.5, 0, -4.5)
+        ),
+        A3D.box(
+          A3D.vec3(10, 2, 10),
+          { type: "Phong", hover: "rgb(50,50,50)", normal: "rgb(150,150,150)" },
+          A3D.vec3(0, 6, 0)
+        ),
+        A3D.sphere(3, { type: "Phong", hover: "rgb(120,30,30)", normal: "rgb(150,50,50)" }, A3D.vec3(0, 0, 0)),
+      ],
+    },
+  ],
+};
diff --git a/packages/abstract-visuals-example/src/app/container.tsx b/packages/abstract-visuals-example/src/app/container.tsx
@@ -1,6 +1,6 @@
 import * as React from "react";
 import { AbstractImageExampleReact } from "./abstract-image-example-react";
-import { Abstract3DExampleReact } from "./abstract-3d-example-react";
+import { Abstract3DExample } from "./abstract-3d-example";
 import { AbstractImageExampleDxf } from "./abstract-image-example-dxf";
 import { AbstractChartExample } from "./abstract-chart-example";
 import { AbstractDocumentExample } from "./abstract-document-example";
@@ -55,7 +55,7 @@ export function Container(): JSX.Element {
           case "AbstractDocumentXML":
             return <AbstractDocumentXMLExample />;
           case "Abstract3D":
-            return <Abstract3DExampleReact />;
+            return <Abstract3DExample />;
           default:
             return <></>;
         }

diff --git a/yarn.lock b/yarn.lock
@@ -2213,6 +2213,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/file-saver@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/file-saver/-/file-saver-2.0.7.tgz#8dbb2f24bdc7486c54aa854eb414940bbd056f7d"
+  integrity sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==
+
 "@types/glob@^7.1.1":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"
@@ -5973,6 +5978,11 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/file-saver/-/file-saver-2.0.5.tgz#d61cfe2ce059f414d899e9dd6d4107ee25670c38"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
 [email protected]:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-2.3.0.tgz#201feaf4c8cd97b9d0d608e96861bb6005f46fe6"