From 1afade929d258fef2b0cf3808b7a3e019b1f1464 Mon Sep 17 00:00:00 2001 From: Tim Svensson Date: Wed, 5 Jun 2024 10:41:22 +0200 Subject: [PATCH] examples --- .../src/renderers/react/react-mesh.tsx | 2 +- .../renderers/svg/svg-geometries/svg-box.ts | 4 +- .../renderers/svg/svg-geometries/svg-cone.ts | 4 +- .../svg/svg-geometries/svg-cylinder.ts | 4 +- .../renderers/svg/svg-geometries/svg-line.ts | 2 +- .../renderers/svg/svg-geometries/svg-plane.ts | 4 +- .../svg/svg-geometries/svg-polygon.ts | 4 +- .../renderers/svg/svg-geometries/svg-shape.ts | 4 +- packages/abstract-3d/src/renderers/svg/svg.ts | 16 ++-- .../abstract-visuals-example/package.json | 4 +- .../src/app/abstract-3d-example-react.tsx | 24 ------ .../src/app/abstract-3d-example.tsx | 76 +++++++++++++++++++ .../src/app/container.tsx | 4 +- yarn.lock | 10 +++ 14 files changed, 113 insertions(+), 49 deletions(-) delete mode 100644 packages/abstract-visuals-example/src/app/abstract-3d-example-react.tsx create mode 100644 packages/abstract-visuals-example/src/app/abstract-3d-example.tsx diff --git a/packages/abstract-3d/src/renderers/react/react-mesh.tsx b/packages/abstract-3d/src/renderers/react/react-mesh.tsx index 255149e6..6f2d9a8f 100644 --- 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 index d04a5abe..b9b68861 100644 --- 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 index a15d421b..f05cfe5f 100644 --- 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 index 35970d64..75d9d1ca 100644 --- 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 index 7371f0d8..22251bff 100644 --- 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 index 706a085d..f2878efa 100644 --- 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 index f14ee7c2..8cecaf89 100644 --- 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 index 8f542004..51f3b7cc 100644 --- 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 index 800ed500..b45f2b85 100644 --- 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, - scale?: { readonly size: number; readonly scaleByWidth: boolean } + buffers?: Record ): { 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 index 58e6d818..bcd06cdf 100644 --- a/packages/abstract-visuals-example/package.json +++ b/packages/abstract-visuals-example/package.json @@ -21,6 +21,7 @@ "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" @@ -28,6 +29,7 @@ "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 deleted file mode 100644 index 836982b9..00000000 --- a/packages/abstract-visuals-example/src/app/abstract-3d-example-react.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from "react"; -import * as A3D from "../../../abstract-3d"; - -export function Abstract3DExampleReact(): React.ReactNode { - return ( - - ); -} diff --git a/packages/abstract-visuals-example/src/app/abstract-3d-example.tsx b/packages/abstract-visuals-example/src/app/abstract-3d-example.tsx new file mode 100644 index 00000000..18f05e62 --- /dev/null +++ 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 ( +
+
+ + + +
+
+ +
+
+ ); +} + +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 index 46e4de1f..532561b5 100644 --- 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 ; case "Abstract3D": - return ; + return ; default: return <>; } diff --git a/yarn.lock b/yarn.lock index 9dfbb1a0..42c0f9ce 100644 --- 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== + file-system-cache@2.3.0: version "2.3.0" resolved "https://registry.yarnpkg.com/file-system-cache/-/file-system-cache-2.3.0.tgz#201feaf4c8cd97b9d0d608e96861bb6005f46fe6"