skewed - npm Package Compare versions

Comparing version 0.6.0 to 0.7.0

dist/index.d.ts

 export * from "./renderer/Scene";
 export * from "./renderer/Viewport";
 export * from "./renderer/Renderer";
+export * from "./renderer/DebugRenderer";
 export * from "./colors/Color";
+export * from "./lighting/DirectionalLight";
+export * from "./lighting/LightingModel";
 export * from "./cameras/Camera";
 export * from "./shapes/Shape";
 export * from "./shapes/Box";
+export * from "./shapes/Grid";
+export * from "./shapes/Group";
 export * from "./shapes/Cylinder";
@@ -12,4 +17,3 @@ export * from "./shapes/Sphere";
 export * from "./meshes/BoxMesh";
-export * from "./meshes/CylinderMesh";
 export * from "./math/Vector3";
 export * from "./math/Matrix4x4";

dist/lighting/DirectionalLight.d.ts

@@ -8,1 +8,3 @@ import { Color } from "../colors/Color";
 };
+export declare type DirectionalLightProperties = Omit<DirectionalLight, "type">;
+export declare function DirectionalLight(props: Partial<DirectionalLightProperties>): DirectionalLight;

dist/math/Matrix4x4.d.ts

@@ -9,3 +9,5 @@ import { Vector3 } from "./Vector3";
     copyPosition(matrix: Matrix4x4): Matrix4x4;
-    extractBasis(xAxis: Vector3, yAxis: Vector3, zAxis: Vector3): Matrix4x4;
+    getTranslation(): Vector3;
+    getScale(): Vector3;
+    extractBasis(xAxis?: Vector3, yAxis?: Vector3, zAxis?: Vector3): Matrix4x4;
     extractRotation(): Matrix4x4;
@@ -12,0 +14,0 @@ lookAt(eye: Vector3, target: Vector3, up: Vector3): Matrix4x4;

dist/math/Vector3.d.ts

@@ -6,2 +6,5 @@ export interface Vector3 {
     set(vec: Vector3): Vector3;
+    setX(x: number): Vector3;
+    setY(y: number): Vector3;
+    setZ(z: number): Vector3;
     add(vec: Vector3): Vector3;
@@ -8,0 +11,0 @@ subtract(vec: Vector3): Vector3;

dist/shapes/Box.d.ts

 import { BasicShapeProperties, Shape } from "./Shape";
-export declare type BoxProps = {
+export declare type BoxProperties = {
     width: number;
     height: number;
     depth: number;
-} & BasicShapeProperties;
-export declare function Box(props: BoxProps): Shape;
+};
+export declare function Box(props: Partial<BoxProperties & BasicShapeProperties>): Shape;

dist/shapes/Cylinder.d.ts

@@ -1,7 +0,6 @@
-import { BasicShapeProperties, Shape } from "./Shape";
-export declare type CylinderProps = {
-    segments: number;
+import { BasicShapeProperties, CylinderShape } from "./Shape";
+export declare type CylinderProperties = {
     radius: number;
     height: number;
 } & BasicShapeProperties;
-export declare function Cylinder(props: CylinderProps): Shape;
+export declare function Cylinder(props: Partial<CylinderProperties>): CylinderShape;

dist/shapes/Shape.d.ts

 import { Mesh } from "../meshes/Mesh";
 import { Vector3 } from "../math/Vector3";
 import { Color } from "../colors/Color";
-export declare type BasicShapeProperties = {
+export declare type TransformProperties = {
     position: Vector3;
     rotation: Vector3;
     scale: number;
+};
+export declare const DefaultTransformProperties: () => TransformProperties;
+export declare type BasicShapeProperties = TransformProperties & {
     fill: Color;
     stroke: Color;
     strokeWidth: number;
+    id: string;
 };
+export declare const DefaultBasicShapeProperties: () => BasicShapeProperties;
+export declare const DefaultShapeDimension = 100;
 export declare type MeshShape = {
@@ -20,2 +26,19 @@ type: "mesh";
 } & BasicShapeProperties;
-export declare type Shape = MeshShape | SphereShape;
+export declare type CylinderShape = {
+    type: "cylinder";
+    radius: number;
+    height: number;
+} & BasicShapeProperties;
+export declare type GroupShape = TransformProperties & {
+    type: "group";
+    id: string;
+    children: Shape[];
+};
+export declare type GridShape = BasicShapeProperties & {
+    type: "grid";
+    id: string;
+    children: Shape[];
+    cellCount: number;
+    cellSize: number;
+};
+export declare type Shape = MeshShape | SphereShape | CylinderShape | GroupShape | GridShape;

dist/shapes/Sphere.d.ts

@@ -1,5 +0,5 @@
-import { BasicShapeProperties, Shape } from "./Shape";
-export declare type SphereProps = {
+import { BasicShapeProperties, SphereShape } from "./Shape";
+export declare type SphereProperties = {
     radius: number;
 } & BasicShapeProperties;
-export declare function Sphere(props: SphereProps): Shape;
+export declare function Sphere(props: Partial<SphereProperties>): SphereShape;

dist/skewed.js

@@ -1,5 +0,14 @@
-const v = {
+const ft = {
   set(t) {
     return this.x = t.x, this.y = t.y, this.z = t.z, this;
   },
+  setX(t) {
+    return this.x = t, this;
+  },
+  setY(t) {
+    return this.y = t, this;
+  },
+  setZ(t) {
+    return this.z = t, this;
+  },
   /**
@@ -22,3 +31,3 @@ * Adds a vector to this vector, mutating it in place. It
   clone() {
-    return q(this.x, this.y, this.z);
+    return J(this.x, this.y, this.z);
   },
@@ -39,90 +48,98 @@ normalize() {
   crossProduct(t) {
-    const n = this.x, e = this.y, s = this.z, i = t.x, o = t.y, r = t.z;
-    return this.x = e * r - s * o, this.y = s * i - n * r, this.z = n * o - e * i, this;
+    const e = this.x, n = this.y, o = this.z, i = t.x, s = t.y, a = t.z;
+    return this.x = n * a - o * s, this.y = o * i - e * a, this.z = e * s - n * i, this;
   }
 };
-function q(t, n, e) {
-  return Object.assign(Object.create(v), { x: t, y: n, z: e });
+function J(t, e, n) {
+  return Object.assign(Object.create(ft), { x: t, y: e, z: n });
 }
-function g(t, n, e) {
+function u(t, e, n) {
   if (typeof t == "object")
-    return Array.isArray(t) ? q(t[0], t[1], t[2]) : q(t.x, t.y, t.z);
-  if (typeof t == "number" && typeof n == "number" && typeof e == "number")
-    return q(t, n, e);
+    return Array.isArray(t) ? J(t[0], t[1], t[2]) : J(t.x, t.y, t.z);
+  if (typeof t == "number" && typeof e == "number" && typeof n == "number")
+    return J(t, e, n);
   throw new Error("Invalid arguments to Vector3 factory");
 }
-g.isVector3 = function(t) {
-  return t.constructor === v.constructor;
+u.isVector3 = function(t) {
+  return t.constructor === ft.constructor;
 };
-g.Zero = function() {
-  return g(0, 0, 0);
+u.Zero = function() {
+  return u(0, 0, 0);
 };
-g.Up = function() {
-  return g(0, 1, 0);
+u.Up = function() {
+  return u(0, 1, 0);
 };
-g.Down = function() {
-  return g(0, -1, 0);
+u.Down = function() {
+  return u(0, -1, 0);
 };
-g.Left = function() {
-  return g(-1, 0, 0);
+u.Left = function() {
+  return u(-1, 0, 0);
 };
-g.Right = function() {
-  return g(1, 0, 0);
+u.Right = function() {
+  return u(1, 0, 0);
 };
-g.Forward = function() {
-  return g(0, 0, -1);
+u.Forward = function() {
+  return u(0, 0, -1);
 };
-g.Backward = function() {
-  return g(0, 0, 1);
+u.Backward = function() {
+  return u(0, 0, 1);
 };
-function C(t, n, e, s, i, o, r, a, h, l, m, u, c, d, y, M) {
+function E(t, e, n, o, i, s, a, d, h, c, f, g, r, p, m, y) {
   if (arguments.length === 0)
-    return C.identity();
+    return E.identity();
   if (arguments.length === 16)
-    return J(
+    return At(
       t,
+      e,
       n,
-      e,
+      o,
+      i,
       s,
-      i,
-      o,
-      r,
       a,
+      d,
       h,
-      l,
+      c,
+      f,
+      g,
+      r,
+      p,
       m,
-      u,
-      c,
-      d,
-      y,
-      M
+      y
     );
   throw new Error("Invalid arguments to Matrix4x4 constructor");
 }
-function J(t, n, e, s, i, o, r, a, h, l, m, u, c, d, y, M) {
-  return Object.assign(Object.create(K), {
+function At(t, e, n, o, i, s, a, d, h, c, f, g, r, p, m, y) {
+  return Object.assign(Object.create(zt), {
     elements: [
       t,
+      e,
       n,
-      e,
+      o,
+      i,
       s,
-      i,
-      o,
-      r,
       a,
+      d,
       h,
-      l,
+      c,
+      f,
+      g,
+      r,
+      p,
       m,
-      u,
-      c,
-      d,
-      y,
-      M
-    ]
+      y
+    ],
+    toString() {
+      console.log(`Matrix4x4(
+  ${this.elements[0]}, ${this.elements[1]}, ${this.elements[2]}, ${this.elements[3]},
+  ${this.elements[4]}, ${this.elements[5]}, ${this.elements[6]}, ${this.elements[7]},
+  ${this.elements[8]}, ${this.elements[9]}, ${this.elements[10]}, ${this.elements[11]},
+  ${this.elements[12]}, ${this.elements[13]}, ${this.elements[14]}, ${this.elements[15]} 
+)`);
+    }
   });
 }
-const K = {
-  set(t, n, e, s, i, o, r, a, h, l, m, u, c, d, y, M) {
-    const f = this.elements;
-    return f[0] = t, f[4] = n, f[8] = e, f[12] = s, f[1] = i, f[5] = o, f[9] = r, f[13] = a, f[2] = h, f[6] = l, f[10] = m, f[14] = u, f[3] = c, f[7] = d, f[11] = y, f[15] = M, this;
+const zt = {
+  set(t, e, n, o, i, s, a, d, h, c, f, g, r, p, m, y) {
+    const l = this.elements;
+    return l[0] = t, l[4] = e, l[8] = n, l[12] = o, l[1] = i, l[5] = s, l[9] = a, l[13] = d, l[2] = h, l[6] = c, l[10] = f, l[14] = g, l[3] = r, l[7] = p, l[11] = m, l[15] = y, this;
   },
@@ -133,3 +150,3 @@ identity() {
   clone() {
-    return C(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1).fromArray(
+    return E(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1).fromArray(
       this.elements,
@@ -140,9 +157,21 @@ 0
   copy(t) {
-    const n = this.elements, e = t.elements;
-    return n[0] = e[0], n[1] = e[1], n[2] = e[2], n[3] = e[3], n[4] = e[4], n[5] = e[5], n[6] = e[6], n[7] = e[7], n[8] = e[8], n[9] = e[9], n[10] = e[10], n[11] = e[11], n[12] = e[12], n[13] = e[13], n[14] = e[14], n[15] = e[15], this;
+    const e = this.elements, n = t.elements;
+    return e[0] = n[0], e[1] = n[1], e[2] = n[2], e[3] = n[3], e[4] = n[4], e[5] = n[5], e[6] = n[6], e[7] = n[7], e[8] = n[8], e[9] = n[9], e[10] = n[10], e[11] = n[11], e[12] = n[12], e[13] = n[13], e[14] = n[14], e[15] = n[15], this;
   },
-  copyPosition(t) {
-    const n = this.elements, e = t.elements;
-    return n[12] = e[12], n[13] = e[13], n[14] = e[14], this;
+  copyTranslationMatrix(t) {
+    const e = this.elements, n = t.elements;
+    return e[12] = n[12], e[13] = n[13], e[14] = n[14], this;
   },
+  getTranslation() {
+    const t = this.elements;
+    return u(t[12], t[13], t[14]);
+  },
+  getScale() {
+    const t = this.elements;
+    return u(
+      u(t[0], t[4], t[8]).length(),
+      u(t[1], t[5], t[9]).length(),
+      u(t[2], t[6], t[10]).length()
+    );
+  },
   // setFromMatrix3(m) {
@@ -170,18 +199,18 @@ //   const me = m.elements;
   // }
-  extractBasis(t, n, e) {
-    return B(t, this.elements, 0), B(n, this.elements, 4), B(e, this.elements, 8), this;
+  extractBasis(t, e, n) {
+    return t !== void 0 && B(t, this.elements, 0), e !== void 0 && B(e, this.elements, 4), n !== void 0 && B(n, this.elements, 8), this;
   },
-  makeBasis(t, n, e) {
+  makeBasis(t, e, n) {
     return this.set(
       t.x,
+      e.x,
       n.x,
-      e.x,
       0,
       t.y,
+      e.y,
       n.y,
-      e.y,
       0,
       t.z,
+      e.z,
       n.z,
-      e.z,
       0,
@@ -195,4 +224,4 @@ 0,
   extractRotation() {
-    const t = C(), n = t.elements, e = this.elements, s = 1 / B(X, e, 0).length(), i = 1 / B(X, e, 4).length(), o = 1 / B(X, e, 8).length();
-    return n[0] = e[0] * s, n[1] = e[1] * s, n[2] = e[2] * s, n[3] = 0, n[4] = e[4] * i, n[5] = e[5] * i, n[6] = e[6] * i, n[7] = 0, n[8] = e[8] * o, n[9] = e[9] * o, n[10] = e[10] * o, n[11] = 0, n[12] = 0, n[13] = 0, n[14] = 0, n[15] = 1, t;
+    const t = E(), e = t.elements, n = this.elements, o = 1 / B(ot, n, 0).length(), i = 1 / B(ot, n, 4).length(), s = 1 / B(ot, n, 8).length();
+    return e[0] = n[0] * o, e[1] = n[1] * o, e[2] = n[2] * o, e[3] = 0, e[4] = n[4] * i, e[5] = n[5] * i, e[6] = n[6] * i, e[7] = 0, e[8] = n[8] * s, e[9] = n[9] * s, e[10] = n[10] * s, e[11] = 0, e[12] = 0, e[13] = 0, e[14] = 0, e[15] = 1, t;
   },
@@ -309,5 +338,5 @@ // makeRotationFromEuler(euler) {
   // }
-  lookAt(t, n, e) {
-    const s = this.elements;
-    return $.set(t).subtract(n), $.lengthSquared() === 0 && ($.z = 1), $.normalize(), T.set(e).crossProduct($), T.lengthSquared() === 0 && (Math.abs(e.z) === 1 ? $.x += 1e-4 : $.z += 1e-4, $.normalize(), T.set(e).crossProduct($)), T.normalize(), U.set($).crossProduct(T), s[0] = T.x, s[4] = U.x, s[8] = $.x, s[1] = T.y, s[5] = U.y, s[9] = $.y, s[2] = T.z, s[6] = U.z, s[10] = $.z, this;
+  lookAt(t, e, n) {
+    const o = this.elements;
+    return T.set(t).subtract(e), T.lengthSquared() === 0 && (T.z = 1), T.normalize(), O.set(n).crossProduct(T), O.lengthSquared() === 0 && (Math.abs(n.z) === 1 ? T.x += 1e-4 : T.z += 1e-4, T.normalize(), O.set(n).crossProduct(T)), O.normalize(), _.set(T).crossProduct(O), o[0] = O.x, o[4] = _.x, o[8] = T.x, o[1] = O.y, o[5] = _.y, o[9] = T.y, o[2] = O.z, o[6] = _.z, o[10] = T.z, this;
   },
@@ -320,5 +349,5 @@ multiply(t) {
   },
-  multiplyMatrices(t, n) {
-    const e = t.elements, s = n.elements, i = this.elements, o = e[0], r = e[4], a = e[8], h = e[12], l = e[1], m = e[5], u = e[9], c = e[13], d = e[2], y = e[6], M = e[10], f = e[14], z = e[3], E = e[7], w = e[11], k = e[15], S = s[0], x = s[4], p = s[8], V = s[12], I = s[1], b = s[5], P = s[9], A = s[13], R = s[2], j = s[6], L = s[10], Z = s[14], D = s[3], F = s[7], N = s[11], O = s[15];
-    return i[0] = o * S + r * I + a * R + h * D, i[4] = o * x + r * b + a * j + h * F, i[8] = o * p + r * P + a * L + h * N, i[12] = o * V + r * A + a * Z + h * O, i[1] = l * S + m * I + u * R + c * D, i[5] = l * x + m * b + u * j + c * F, i[9] = l * p + m * P + u * L + c * N, i[13] = l * V + m * A + u * Z + c * O, i[2] = d * S + y * I + M * R + f * D, i[6] = d * x + y * b + M * j + f * F, i[10] = d * p + y * P + M * L + f * N, i[14] = d * V + y * A + M * Z + f * O, i[3] = z * S + E * I + w * R + k * D, i[7] = z * x + E * b + w * j + k * F, i[11] = z * p + E * P + w * L + k * N, i[15] = z * V + E * A + w * Z + k * O, this;
+  multiplyMatrices(t, e) {
+    const n = t.elements, o = e.elements, i = this.elements, s = n[0], a = n[4], d = n[8], h = n[12], c = n[1], f = n[5], g = n[9], r = n[13], p = n[2], m = n[6], y = n[10], l = n[14], x = n[3], b = n[7], z = n[11], P = n[15], M = o[0], S = o[4], I = o[8], D = o[12], F = o[1], L = o[5], C = o[9], A = o[13], $ = o[2], w = o[6], k = o[10], R = o[14], W = o[3], V = o[7], U = o[11], X = o[15];
+    return i[0] = s * M + a * F + d * $ + h * W, i[4] = s * S + a * L + d * w + h * V, i[8] = s * I + a * C + d * k + h * U, i[12] = s * D + a * A + d * R + h * X, i[1] = c * M + f * F + g * $ + r * W, i[5] = c * S + f * L + g * w + r * V, i[9] = c * I + f * C + g * k + r * U, i[13] = c * D + f * A + g * R + r * X, i[2] = p * M + m * F + y * $ + l * W, i[6] = p * S + m * L + y * w + l * V, i[10] = p * I + m * C + y * k + l * U, i[14] = p * D + m * A + y * R + l * X, i[3] = x * M + b * F + z * $ + P * W, i[7] = x * S + b * L + z * w + P * V, i[11] = x * I + b * C + z * k + P * U, i[15] = x * D + b * A + z * R + P * X, this;
   },
@@ -346,28 +375,28 @@ // multiplyScalar(s) {
   determinant() {
-    const t = this.elements, n = t[0], e = t[4], s = t[8], i = t[12], o = t[1], r = t[5], a = t[9], h = t[13], l = t[2], m = t[6], u = t[10], c = t[14], d = t[3], y = t[7], M = t[11], f = t[15];
-    return d * (+i * a * m - s * h * m - i * r * u + e * h * u + s * r * c - e * a * c) + y * (+n * a * c - n * h * u + i * o * u - s * o * c + s * h * l - i * a * l) + M * (+n * h * m - n * r * c - i * o * m + e * o * c + i * r * l - e * h * l) + f * (-s * r * l - n * a * m + n * r * u + s * o * m - e * o * u + e * a * l);
+    const t = this.elements, e = t[0], n = t[4], o = t[8], i = t[12], s = t[1], a = t[5], d = t[9], h = t[13], c = t[2], f = t[6], g = t[10], r = t[14], p = t[3], m = t[7], y = t[11], l = t[15];
+    return p * (+i * d * f - o * h * f - i * a * g + n * h * g + o * a * r - n * d * r) + m * (+e * d * r - e * h * g + i * s * g - o * s * r + o * h * c - i * d * c) + y * (+e * h * f - e * a * r - i * s * f + n * s * r + i * a * c - n * h * c) + l * (-o * a * c - e * d * f + e * a * g + o * s * f - n * s * g + n * d * c);
   },
   transpose() {
     const t = this.elements;
-    let n;
-    return n = t[1], t[1] = t[4], t[4] = n, n = t[2], t[2] = t[8], t[8] = n, n = t[6], t[6] = t[9], t[9] = n, n = t[3], t[3] = t[12], t[12] = n, n = t[7], t[7] = t[13], t[13] = n, n = t[11], t[11] = t[14], t[14] = n, this;
+    let e;
+    return e = t[1], t[1] = t[4], t[4] = e, e = t[2], t[2] = t[8], t[8] = e, e = t[6], t[6] = t[9], t[9] = e, e = t[3], t[3] = t[12], t[12] = e, e = t[7], t[7] = t[13], t[13] = e, e = t[11], t[11] = t[14], t[14] = e, this;
   },
-  setPosition(t, n, e) {
-    const s = this.elements;
-    return s[12] = t, s[13] = n, s[14] = e, this;
+  setPosition(t, e, n) {
+    const o = this.elements;
+    return o[12] = t, o[13] = e, o[14] = n, this;
   },
   invert() {
-    const t = this.elements, n = t[0], e = t[1], s = t[2], i = t[3], o = t[4], r = t[5], a = t[6], h = t[7], l = t[8], m = t[9], u = t[10], c = t[11], d = t[12], y = t[13], M = t[14], f = t[15], z = m * M * h - y * u * h + y * a * c - r * M * c - m * a * f + r * u * f, E = d * u * h - l * M * h - d * a * c + o * M * c + l * a * f - o * u * f, w = l * y * h - d * m * h + d * r * c - o * y * c - l * r * f + o * m * f, k = d * m * a - l * y * a - d * r * u + o * y * u + l * r * M - o * m * M, S = n * z + e * E + s * w + i * k;
-    if (S === 0)
+    const t = this.elements, e = t[0], n = t[1], o = t[2], i = t[3], s = t[4], a = t[5], d = t[6], h = t[7], c = t[8], f = t[9], g = t[10], r = t[11], p = t[12], m = t[13], y = t[14], l = t[15], x = f * y * h - m * g * h + m * d * r - a * y * r - f * d * l + a * g * l, b = p * g * h - c * y * h - p * d * r + s * y * r + c * d * l - s * g * l, z = c * m * h - p * f * h + p * a * r - s * m * r - c * a * l + s * f * l, P = p * f * d - c * m * d - p * a * g + s * m * g + c * a * y - s * f * y, M = e * x + n * b + o * z + i * P;
+    if (M === 0)
       return this.set(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0);
-    const x = 1 / S;
-    return t[0] = z * x, t[1] = (y * u * i - m * M * i - y * s * c + e * M * c + m * s * f - e * u * f) * x, t[2] = (r * M * i - y * a * i + y * s * h - e * M * h - r * s * f + e * a * f) * x, t[3] = (m * a * i - r * u * i - m * s * h + e * u * h + r * s * c - e * a * c) * x, t[4] = E * x, t[5] = (l * M * i - d * u * i + d * s * c - n * M * c - l * s * f + n * u * f) * x, t[6] = (d * a * i - o * M * i - d * s * h + n * M * h + o * s * f - n * a * f) * x, t[7] = (o * u * i - l * a * i + l * s * h - n * u * h - o * s * c + n * a * c) * x, t[8] = w * x, t[9] = (d * m * i - l * y * i - d * e * c + n * y * c + l * e * f - n * m * f) * x, t[10] = (o * y * i - d * r * i + d * e * h - n * y * h - o * e * f + n * r * f) * x, t[11] = (l * r * i - o * m * i - l * e * h + n * m * h + o * e * c - n * r * c) * x, t[12] = k * x, t[13] = (l * y * s - d * m * s + d * e * u - n * y * u - l * e * M + n * m * M) * x, t[14] = (d * r * s - o * y * s - d * e * a + n * y * a + o * e * M - n * r * M) * x, t[15] = (o * m * s - l * r * s + l * e * a - n * m * a - o * e * u + n * r * u) * x, this;
+    const S = 1 / M;
+    return t[0] = x * S, t[1] = (m * g * i - f * y * i - m * o * r + n * y * r + f * o * l - n * g * l) * S, t[2] = (a * y * i - m * d * i + m * o * h - n * y * h - a * o * l + n * d * l) * S, t[3] = (f * d * i - a * g * i - f * o * h + n * g * h + a * o * r - n * d * r) * S, t[4] = b * S, t[5] = (c * y * i - p * g * i + p * o * r - e * y * r - c * o * l + e * g * l) * S, t[6] = (p * d * i - s * y * i - p * o * h + e * y * h + s * o * l - e * d * l) * S, t[7] = (s * g * i - c * d * i + c * o * h - e * g * h - s * o * r + e * d * r) * S, t[8] = z * S, t[9] = (p * f * i - c * m * i - p * n * r + e * m * r + c * n * l - e * f * l) * S, t[10] = (s * m * i - p * a * i + p * n * h - e * m * h - s * n * l + e * a * l) * S, t[11] = (c * a * i - s * f * i - c * n * h + e * f * h + s * n * r - e * a * r) * S, t[12] = P * S, t[13] = (c * m * o - p * f * o + p * n * g - e * m * g - c * n * y + e * f * y) * S, t[14] = (p * a * o - s * m * o - p * n * d + e * m * d + s * n * y - e * a * y) * S, t[15] = (s * f * o - c * a * o + c * n * d - e * f * d - s * n * g + e * a * g) * S, this;
   },
   scale(t) {
-    const n = this.elements, e = t.x, s = t.y, i = t.z;
-    return n[0] *= e, n[4] *= s, n[8] *= i, n[1] *= e, n[5] *= s, n[9] *= i, n[2] *= e, n[6] *= s, n[10] *= i, n[3] *= e, n[7] *= s, n[11] *= i, this;
+    const e = this.elements, n = t.x, o = t.y, i = t.z;
+    return e[0] *= n, e[4] *= o, e[8] *= i, e[1] *= n, e[5] *= o, e[9] *= i, e[2] *= n, e[6] *= o, e[10] *= i, e[3] *= n, e[7] *= o, e[11] *= i, this;
   },
   applyToVector3(t) {
-    const n = t.x, e = t.y, s = t.z, i = this.elements, o = 1 / (i[3] * n + i[7] * e + i[11] * s + i[15]);
-    t.x = (i[0] * n + i[4] * e + i[8] * s + i[12]) * o, t.y = (i[1] * n + i[5] * e + i[9] * s + i[13]) * o, t.z = (i[2] * n + i[6] * e + i[10] * s + i[14]) * o;
+    const e = t.x, n = t.y, o = t.z, i = this.elements, s = 1 / (i[3] * e + i[7] * n + i[11] * o + i[15]);
+    t.x = (i[0] * e + i[4] * n + i[8] * o + i[12]) * s, t.y = (i[1] * e + i[5] * n + i[9] * o + i[13]) * s, t.z = (i[2] * e + i[6] * n + i[10] * o + i[14]) * s;
   },
@@ -381,16 +410,16 @@ // getMaxScaleOnAxis() {
   // }
-  makeTranslation(t, n, e) {
-    return this.set(1, 0, 0, t, 0, 1, 0, n, 0, 0, 1, e, 0, 0, 0, 1), this;
+  makeTranslation(t, e, n) {
+    return this.set(1, 0, 0, t, 0, 1, 0, e, 0, 0, 1, n, 0, 0, 0, 1), this;
   },
   makeRotationX(t) {
-    const n = Math.cos(t), e = Math.sin(t);
-    return this.set(1, 0, 0, 0, 0, n, -e, 0, 0, e, n, 0, 0, 0, 0, 1), this;
+    const e = Math.cos(t), n = Math.sin(t);
+    return this.set(1, 0, 0, 0, 0, e, -n, 0, 0, n, e, 0, 0, 0, 0, 1), this;
   },
   makeRotationY(t) {
-    const n = Math.cos(t), e = Math.sin(t);
-    return this.set(n, 0, e, 0, 0, 1, 0, 0, -e, 0, n, 0, 0, 0, 0, 1), this;
+    const e = Math.cos(t), n = Math.sin(t);
+    return this.set(e, 0, n, 0, 0, 1, 0, 0, -n, 0, e, 0, 0, 0, 0, 1), this;
   },
   makeRotationZ(t) {
-    const n = Math.cos(t), e = Math.sin(t);
-    return this.set(n, -e, 0, 0, e, n, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1), this;
+    const e = Math.cos(t), n = Math.sin(t);
+    return this.set(e, -n, 0, 0, n, e, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1), this;
   },
@@ -427,7 +456,7 @@ // makeRotationAxis(axis, angle) {
   // }
-  makeScale(t, n, e) {
-    return this.set(t, 0, 0, 0, 0, n, 0, 0, 0, 0, e, 0, 0, 0, 0, 1), this;
+  makeScale(t, e, n) {
+    return this.set(t, 0, 0, 0, 0, e, 0, 0, 0, 0, n, 0, 0, 0, 0, 1), this;
   },
-  makeShear(t, n, e, s, i, o) {
-    return this.set(1, e, i, 0, t, 1, o, 0, n, s, 1, 0, 0, 0, 0, 1), this;
+  makeShear(t, e, n, o, i, s) {
+    return this.set(1, n, i, 0, t, 1, s, 0, e, o, 1, 0, 0, 0, 0, 1), this;
   },
@@ -541,17 +570,17 @@ // compose(position, quaternion, scale) {
   // }
-  makeOrthographic(t, n, e, s, i, o) {
-    const r = this.elements, a = 1 / (n - t), h = 1 / (e - s), l = 1 / (o - i), m = (n + t) * a, u = (e + s) * h;
-    let c, d;
-    return c = (o + i) * l, d = -2 * l, r[0] = 2 * a, r[4] = 0, r[8] = 0, r[12] = -m, r[1] = 0, r[5] = 2 * h, r[9] = 0, r[13] = -u, r[2] = 0, r[6] = 0, r[10] = d, r[14] = -c, r[3] = 0, r[7] = 0, r[11] = 0, r[15] = 1, this;
+  makeOrthographic(t, e, n, o, i, s) {
+    const a = this.elements, d = 1 / (e - t), h = 1 / (n - o), c = 1 / (s - i), f = (e + t) * d, g = (n + o) * h;
+    let r, p;
+    return r = (s + i) * c, p = -2 * c, a[0] = 2 * d, a[4] = 0, a[8] = 0, a[12] = -f, a[1] = 0, a[5] = 2 * h, a[9] = 0, a[13] = -g, a[2] = 0, a[6] = 0, a[10] = p, a[14] = -r, a[3] = 0, a[7] = 0, a[11] = 0, a[15] = 1, this;
   },
   equals(t) {
-    const n = this.elements, e = t.elements;
-    for (let s = 0; s < 16; s++)
-      if (n[s] !== e[s])
+    const e = this.elements, n = t.elements;
+    for (let o = 0; o < 16; o++)
+      if (e[o] !== n[o])
         return !1;
     return !0;
   },
-  fromArray(t, n = 0) {
-    for (let e = 0; e < 16; e++)
-      this.elements[e] = t[e + n];
+  fromArray(t, e = 0) {
+    for (let n = 0; n < 16; n++)
+      this.elements[n] = t[n + e];
     return this;
@@ -580,40 +609,40 @@ }
 };
-C.identity = function() {
-  return C(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
+E.identity = function() {
+  return E(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
 };
-function B(t, n, e) {
-  return t.x = n[e], t.y = n[e + 1], t.z = n[e + 2], t;
+function B(t, e, n) {
+  return t.x = e[n], t.y = e[n + 1], t.z = e[n + 2], t;
 }
-const X = /* @__PURE__ */ g.Zero(), T = /* @__PURE__ */ g.Zero(), U = /* @__PURE__ */ g.Zero(), $ = /* @__PURE__ */ g.Zero(), Q = {};
-function ut(t) {
-  return _(t || C.identity(), C.identity());
+const ot = /* @__PURE__ */ u.Zero(), O = /* @__PURE__ */ u.Zero(), _ = /* @__PURE__ */ u.Zero(), T = /* @__PURE__ */ u.Zero(), Pt = {};
+function _t(t) {
+  return ut(t || E.identity(), E.identity());
 }
-function _(t, n) {
-  return Object.assign(Object.create(Q), {
+function ut(t, e) {
+  return Object.assign(Object.create(Pt), {
     matrix: t,
-    projectionMatrix: n
+    projectionMatrix: e
   });
 }
-function ft(t, n, e, s) {
+function Qt(t, e, n, o) {
   return {
-    x: (t - e) * Math.cos(Math.PI / 6) + s.width / 2,
-    y: (t + e) * Math.sin(Math.PI / 6) - n + s.height / 2
+    x: (t - n) * Math.cos(Math.PI / 6) + o.width / 2,
+    y: (t + n) * Math.sin(Math.PI / 6) - e + o.height / 2
   };
 }
-function mt(t, n, e, s) {
-  let i = Math.PI / 4, o = 0.5;
+function Ht(t, e, n, o) {
+  let i = Math.PI / 4, s = 0.5;
   return {
-    x: t + o * e * Math.cos(i) + s.width / 2,
-    y: n + o * e * Math.sin(i) + s.height / 2
+    x: t + s * n * Math.cos(i) + o.width / 2,
+    y: e + s * n * Math.sin(i) + o.height / 2
   };
 }
-function Y(t, n, e) {
-  const s = g(t);
-  return n.applyToVector3(s), s.x = s.x * e.width / 2 + e.width, s.y = s.y * e.height / 2, s;
+function K(t, e, n) {
+  const o = u(t);
+  return e.applyToVector3(o), o.x = o.x * n.width / 2 + n.width, o.y = o.y * n.height / 2, o;
 }
-function W(t, n, e, s = 1) {
-  return { r: t, g: n, b: e, a: s };
+function N(t, e, n, o = 1) {
+  return { r: t, g: e, b: n, a: o };
 }
-const dt = W(255, 0, 0), yt = W(0, 255, 0), Mt = W(0, 0, 255);
-function tt(t) {
+const Jt = N(255, 0, 0), Kt = N(0, 255, 0), te = N(0, 0, 255);
+function q(t) {
   return t.a < 1 ? `rgba(${Math.floor(t.r)},${Math.floor(t.g)},${Math.floor(
@@ -625,17 +654,17 @@ t.b
 }
-function G(t, n, e, s) {
-  s = Math.min(1, Math.max(0, s));
-  const i = W(
-    t.r / 255 * s,
-    t.g / 255 * s,
-    t.b / 255 * s
-  ), o = W(
-    e.r / 255,
-    e.g / 255,
-    e.b / 255
-  ), r = W(
+function Y(t, e, n, o) {
+  o = Math.min(1, Math.max(0, o));
+  const i = N(
+    t.r / 255 * o,
+    t.g / 255 * o,
+    t.b / 255 * o
+  ), s = N(
+    n.r / 255,
+    n.g / 255,
+    n.b / 255
+  ), a = N(
     Math.floor(
       Math.min(
         255,
-        n.r * i.r + n.r * o.r
+        e.r * i.r + e.r * s.r
       )
@@ -646,3 +675,3 @@ ),
         255,
-        n.g * i.g + n.g * o.g
+        e.g * i.g + e.g * s.g
       )
@@ -653,311 +682,724 @@ ),
         255,
-        n.b * i.b + n.b * o.b
+        e.b * i.b + e.b * s.b
       )
     ),
-    n.a
+    e.a
   );
-  return tt(r);
+  return q(a);
 }
-function et(t, n, e, s, i, o, r) {
-  const a = t.directionalLight.direction.clone();
-  o.extractRotation().applyToVector3(a), console.log(
-    a,
-    a.length()
+const Ct = !1;
+function Q(t) {
+  return Math.acos(t) * (180 / Math.PI);
+}
+function it(t, e) {
+  return (Math.atan2(e, t) * (180 / Math.PI) + 360) % 360;
+}
+globalThis.calculateRotationAngle = it;
+function It(t, e) {
+  return (it(t, -e) + 90) % 360;
+}
+globalThis.calculateCycleAngle = It;
+function Dt(t, e, n, o, i, s, a, d, h) {
+  const c = t.directionalLight.direction.clone();
+  d.extractRotation().applyToVector3(c);
+  let f = it(
+    -c.x,
+    -c.y
   );
-  let h = Math.abs(a.x * 90), l = 0;
-  a.x < 0 && (l += 180), a.x < 0 ? 90 - Math.abs(a.x * 90) : a.x * 90, nt(
+  const g = c.multiply(-1), r = u(0, 0, 1).dotProduct(
+    g
+  ), p = u(0, 0, -1).dotProduct(
+    g
+  );
+  let m;
+  r > 0 ? (m = Q(r), Lt(
     t,
+    e,
     n,
+    o,
+    i,
+    s,
+    a,
+    h,
+    m,
+    f
+  )) : (m = 90 - Q(p), Et(
+    t,
     e,
+    n,
+    o,
+    i,
     s,
-    i,
-    r,
+    a,
     h,
-    l
+    m,
+    f
+  )), o.id && Ct && console.log(
+    `id: ${o.id},
+  lightSideDotProduct: ${r},
+  lightSideDotProductDegrees: ${Q(r)},
+  darkSideLightProduct: ${p},
+  darkSideLightProductDegrees: ${90 - Q(p)},
+  cycleAngle: ${m}, 
+  rotationAngle: ${f},
+  directionalLightInCameraSpace.x = ${c.x.toFixed(
+      1
+    )},
+  directionalLightInCameraSpace.y = ${c.y.toFixed(
+      1
+    )},
+  directionalLightInCameraSpace.z = ${c.z.toFixed(
+      1
+    )}
+  scene.directionalLight.direction.x = ${t.directionalLight.direction.x.toFixed(
+      1
+    )},
+  scene.directionalLight.direction.y = ${t.directionalLight.direction.y.toFixed(
+      1
+    )},
+  scene.directionalLight.direction.z = ${t.directionalLight.direction.z.toFixed(
+      1
+    )}
+  `
   );
 }
-function nt(t, n, e, s, i, o, r, a) {
-  r > 270 && (r = 90 - (r - 270), a += 180);
-  const h = s.radius, l = h, m = crypto.randomUUID(), u = 0, c = [];
-  c.push({ offset: 0, stopColor: "red" }), c.push({ offset: u, stopColor: "red" });
-  for (let P = 0; P <= l; P++) {
-    const R = P / l * Math.PI / 2, j = Math.cos(R), L = Math.sin(R);
-    c.push({
-      offset: L * (1 - u) + u,
-      stopColor: G(
+function Lt(t, e, n, o, i, s, a, d, h, c) {
+  const g = s.getScale().x * a, r = o.radius * g, p = r, m = crypto.randomUUID(), y = 0, l = [];
+  l.push({ offset: 0, stopColor: "red" }), l.push({ offset: y, stopColor: "red" });
+  for (let k = 0; k <= p; k++) {
+    const W = k / p * Math.PI / 2, V = Math.cos(W), U = Math.sin(W);
+    l.push({
+      offset: U * (1 - y) + y,
+      stopColor: Y(
         t.directionalLight.color,
-        s.fill,
+        o.fill,
         t.ambientLightColor,
-        j
+        V
       )
     });
   }
-  const d = Math.sin(r / 180 * Math.PI) * h, y = Math.cos(-a / 180 * Math.PI) * d + h, M = Math.sin(-a / 180 * Math.PI) * d + h, { x: f, y: z } = Y(
-    s.position,
-    o,
+  const x = Math.sin(h / 180 * Math.PI) * r, b = Math.cos(-c / 180 * Math.PI) * x + r, z = Math.sin(-c / 180 * Math.PI) * x + r, { x: P, y: M } = K(
+    s.getTranslation(),
+    d,
     i
-  ), E = Math.sin((r - 90) / 180 * Math.PI) * h, w = {
-    x: y + h + f - h * 2,
-    y: M + h + z - h * 2
-  }, k = d - E, S = st(
-    k,
-    -d,
-    h
-  ), x = { x: k, y: S }, p = m + "-fill", V = `url(#${p})`, I = document.createElementNS(
+  ), S = Math.sin((h - 90) / 180 * Math.PI) * r, I = {
+    x: b + r + P - r * 2,
+    y: z + r + M - r * 2
+  }, D = x - S, F = pt(
+    D,
+    -x,
+    r
+  ), L = { x: D, y: F }, C = m + "-fill", A = `url(#${C})`, $ = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "circle"
   );
-  I.setAttribute("cx", f.toString()), I.setAttribute("cy", z.toString()), I.setAttribute("r", s.radius.toString()), I.setAttribute("fill", V);
-  const b = document.createElementNS(
+  $.id = "sphere", $.setAttribute("cx", P.toString()), $.setAttribute("cy", M.toString()), $.setAttribute("r", r.toString()), $.setAttribute("fill", A), o.strokeWidth && o.stroke.a > 0 && ($.setAttribute("stroke", q(o.stroke)), o.strokeWidth !== 1 && $.setAttribute(
+    "stroke-width",
+    (o.strokeWidth * g).toString()
+  ));
+  const w = document.createElementNS(
     "http://www.w3.org/2000/svg",
     "radialGradient"
   );
-  b.setAttribute("id", p), b.setAttribute("cx", "0"), b.setAttribute("cy", "0"), b.setAttribute("r", "1"), b.setAttribute("gradientUnits", "userSpaceOnUse"), b.setAttribute(
+  w.setAttribute("id", C), w.setAttribute("cx", "0"), w.setAttribute("cy", "0"), w.setAttribute("r", "1"), w.setAttribute("gradientUnits", "userSpaceOnUse"), w.setAttribute(
     "gradientTransform",
-    `translate(${w.x} ${w.y}) rotate(${-a}) scale(${x.x} ${x.y})`
+    `translate(${I.x} ${I.y}) rotate(${-c}) scale(${L.x} ${L.y})`
   );
-  for (let P of c) {
-    const A = document.createElementNS(
+  for (let k of l) {
+    const R = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "stop"
     );
-    A.setAttribute("offset", P.offset.toString()), A.setAttribute("stop-color", P.stopColor), b.appendChild(A);
+    R.setAttribute("offset", k.offset.toString()), R.setAttribute("stop-color", k.stopColor), w.appendChild(R);
   }
-  e.appendChild(b), n.appendChild(I);
+  n.appendChild(w), e.appendChild($);
 }
-function st(t, n, e) {
-  let s = 1 - n * n / (t * t);
-  return s === 0 && (s = 1e-4), Math.sqrt(e * e / s);
+function pt(t, e, n) {
+  let o = 1 - e * e / (t * t);
+  return o === 0 && (o = 1e-4), Math.sqrt(n * n / o);
 }
-const it = 0.5;
-function gt(t, n, e, s) {
-  const i = s.matrix.clone().invert(), o = s.projectionMatrix.clone().multiply(i);
+function mt(t, e) {
+  return {
+    x: Math.cos(e / 180 * Math.PI) * t,
+    y: -Math.sin(e / 180 * Math.PI) * t
+  };
+}
+window.rotate = mt;
+function Et(t, e, n, o, i, s, a, d, h, c) {
+  const g = s.getScale().x * a, r = o.radius * g, p = r, m = crypto.randomUUID(), y = 0, l = [];
+  l.push({ offset: 0, stopColor: "red" }), l.push({ offset: y, stopColor: "red" });
+  const x = Y(
+    t.directionalLight.color,
+    o.fill,
+    t.ambientLightColor,
+    0
+  );
+  l.push({
+    offset: y,
+    stopColor: x
+  }), l.push({
+    offset: 0.5,
+    stopColor: x
+  });
+  for (let w = 0; w <= p; w++) {
+    const k = w / p, R = k * Math.PI / 2;
+    let W = Math.max(0, Math.sin(R));
+    const V = Math.cos(k * Math.PI / 2 + Math.PI) + 1;
+    l.push({
+      // Offset of [0,1] maps to the last half of the gradient [0.5,1]
+      offset: V / 2 + 0.5,
+      stopColor: Y(
+        t.directionalLight.color,
+        o.fill,
+        t.ambientLightColor,
+        W
+      )
+    });
+  }
+  const { x: b, y: z } = K(
+    s.getTranslation(),
+    d,
+    i
+  ), P = Math.cos((h + 180) / 180 * Math.PI) * r, M = mt(P, c), I = Math.sin(h / 180 * Math.PI) * r - P, D = pt(
+    I,
+    P,
+    r
+  ), F = { x: I, y: D }, L = m + "-fill", C = `url(#${L})`, A = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "circle"
+  );
+  A.id = "sphere", A.setAttribute("cx", b.toString()), A.setAttribute("cy", z.toString()), A.setAttribute("r", r.toString()), A.setAttribute("fill", C), o.strokeWidth && o.stroke.a > 0 && (A.setAttribute("stroke", q(o.stroke)), o.strokeWidth !== 1 && A.setAttribute(
+    "stroke-width",
+    (o.strokeWidth * g).toString()
+  ));
+  const $ = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "radialGradient"
+  );
+  $.setAttribute("id", L), $.setAttribute("cx", "0"), $.setAttribute("cy", "0"), $.setAttribute("r", "1"), $.setAttribute("gradientUnits", "userSpaceOnUse"), $.setAttribute(
+    "gradientTransform",
+    `translate(${M.x + b} ${M.y + z}) rotate(${-c}) scale(${F.x * 2} ${F.y * 2})`
+  );
+  for (let w of l) {
+    const k = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "stop"
+    );
+    k.setAttribute("offset", w.offset.toString()), k.setAttribute("stop-color", w.stopColor), $.appendChild(k);
+  }
+  n.appendChild($), e.appendChild(A);
+}
+const Rt = 0.5;
+function Tt(t, e, n, o, i, s, a, d, h, c) {
+  const f = [
+    // Top
+    u(0, o.height / 2, 0),
+    // Bottom
+    u(0, -o.height / 2, 0)
+  ].map((j) => (s.applyToVector3(j), K(
+    j,
+    c,
+    i
+  ))), g = u(0, 0, 0);
+  s.extractBasis(void 0, g, void 0);
+  const r = g.clone();
+  h.extractRotation().applyToVector3(r);
+  const p = r.dotProduct(u(0, 0, 1)), m = Math.abs(p), y = p > 0, x = s.getScale().x * a, b = o.radius * x, z = b * m, P = y ? g.clone() : g.clone().multiply(-1), M = y ? r.clone() : r.clone().multiply(-1), S = u(
+    M.x,
+    -M.y,
+    0
+  ).normalize(), I = y ? f[
+    0
+    /* Top */
+  ] : f[
+    1
+    /* Bottom */
+  ], D = y ? f[
+    1
+    /* Bottom */
+  ] : f[
+    0
+    /* Top */
+  ], F = u(
+    -S.y,
+    S.x,
+    0
+  ), L = u(
+    S.y,
+    -S.x,
+    0
+  ), C = F.clone().multiply(b).add(I), A = L.clone().multiply(b).add(I), $ = F.clone().multiply(b).add(D), w = L.clone().multiply(b).add(D), k = Ft(L.x, L.y), R = 0, W = 0, V = t.directionalLight.direction.clone().multiply(-1), U = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "path"
+  );
+  U.setAttribute("id", y ? "cylinder-top" : "cylinder-bottom");
+  const X = Y(
+    t.directionalLight.color,
+    o.fill,
+    t.ambientLightColor,
+    V.dotProduct(P.clone())
+  );
+  U.setAttribute("fill", X), dt(U, o, x, X), e.appendChild(U), U.setAttribute(
+    "d",
+    `
+    M ${C.x} ${C.y} A ${b} ${z} ${k} ${R} ${W} ${A.x} ${A.y}
+    A ${b} ${z} ${k} ${1} ${W} ${C.x} ${C.y}`
+  );
+  const G = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "path"
+  );
+  G.setAttribute("id", "cylinder-tube"), G.setAttribute("fill", "purple"), G.setAttribute(
+    "d",
+    `
+    M ${C.x} ${C.y} 
+    A ${b} ${z} ${k} 0 1 ${A.x} ${A.y}
+    L ${w.x} ${w.y}
+    A ${b} ${z} ${k} 0 0 ${$.x} ${$.y}
+    Z
+    `
+  ), dt(G, o, x), e.appendChild(G);
+  const st = V.clone();
+  h.extractRotation().applyToVector3(st);
+  const rt = crypto.randomUUID() + "-fill", St = `url(#${rt})`;
+  G.setAttribute("fill", St);
+  const v = document.createElementNS(
+    "http://www.w3.org/2000/svg",
+    "linearGradient"
+  );
+  v.setAttribute("id", rt), v.setAttribute("gradientUnits", "userSpaceOnUse");
+  const ct = C.clone().add($).multiply(0.5), at = A.clone().add(w).multiply(0.5);
+  v.setAttribute("x1", ct.x.toString()), v.setAttribute("y1", ct.y.toString()), v.setAttribute("x2", at.x.toString()), v.setAttribute("y2", at.y.toString());
+  const Mt = u(0, 0, 1).crossProduct(M).normalize(), $t = E().lookAt(
+    u(0, 0, 0),
+    Mt,
+    M
+  ), lt = Math.max(2, Math.min(255, Math.floor(b)));
+  for (let j = 0; j < lt; j++) {
+    const et = j / (lt - 1), wt = Math.cos(et * Math.PI + Math.PI / 2), kt = -Math.cos(et * Math.PI + Math.PI), ht = u(wt, 0, kt);
+    $t.applyToVector3(ht);
+    const nt = document.createElementNS(
+      "http://www.w3.org/2000/svg",
+      "stop"
+    );
+    nt.setAttribute("offset", et.toFixed(3)), nt.setAttribute(
+      "stop-color",
+      Y(
+        t.directionalLight.color,
+        o.fill,
+        t.ambientLightColor,
+        st.dotProduct(ht)
+      )
+    ), v.appendChild(nt);
+  }
+  n.appendChild(v);
+}
+function dt(t, e, n, o) {
+  e.strokeWidth && e.stroke.a > 0 ? (t.setAttribute("stroke", q(e.stroke)), e.strokeWidth !== 1 && t.setAttribute(
+    "stroke-width",
+    (e.strokeWidth * n).toString()
+  )) : o !== void 0 && (t.setAttribute("stroke", o), t.setAttribute(
+    "stroke-width",
+    (Rt * n).toString()
+  ));
+}
+function Ft(t, e) {
+  return Math.atan2(e, t) / Math.PI * 180;
+}
+const Wt = 0.5;
+function ee(t, e, n, o) {
+  var y;
+  const i = o.matrix.clone().invert(), s = o.projectionMatrix.clone().multiply(i), a = Vt(
+    o.projectionMatrix
+  ), d = n.width / a.width, h = yt(e.shapes);
   t.innerHTML = "";
-  var r = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  r.setAttribute(
+  var c = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  c.id = "scene", c.setAttribute(
     "viewBox",
-    `0 0 ${e.width.toString()} ${e.height.toString()}`
+    `0 0 ${n.width.toString()} ${n.height.toString()}`
   );
-  const a = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-  r.appendChild(a);
-  const h = s.matrix.extractRotation(), l = g(0, 0, 0);
-  h.extractBasis(
-    g(0, 0, 0),
-    g(0, 0, 0),
-    l
+  const f = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  c.appendChild(f);
+  const g = o.matrix.extractRotation(), r = u(0, 0, 0);
+  g.extractBasis(
+    u(0, 0, 0),
+    u(0, 0, 0),
+    r
   );
-  let m = n.shapes.map((u, c) => c);
-  m.sort((u, c) => {
-    const d = l.dotProduct(n.shapes[u].position), y = l.dotProduct(n.shapes[c].position);
-    return d - y;
+  const m = bt(e.shapes).map((l) => {
+    var x;
+    return {
+      shape: l,
+      position: ((x = h.get(l.shape)) == null ? void 0 : x.getTranslation()) || u(0, 0, 0)
+    };
   });
-  for (let u of m) {
-    const c = n.shapes[u];
-    switch (c.type) {
+  m.sort((l, x) => {
+    const b = l.shape.sortCategory === "background" ? -1e3 : r.dotProduct(l.position), z = x.shape.sortCategory === "background" ? -1e3 : r.dotProduct(x.position);
+    return b - z;
+  });
+  for (let l of m) {
+    const x = l.shape.shape, b = h.get(x);
+    if (b === void 0)
+      throw new Error("World transform is undefined");
+    switch (x.type) {
       case "mesh":
-        ot(
+        Nt(
+          e,
+          c,
+          x,
           n,
-          r,
+          b,
+          d,
+          s,
+          r
+        );
+        break;
+      case "sphere":
+        Dt(
+          e,
           c,
-          e,
+          f,
+          x,
+          n,
+          b,
+          d,
           i,
-          o,
-          l
+          s
         );
         break;
-      case "sphere":
-        et(
+      case "cylinder":
+        Tt(
+          e,
+          c,
+          f,
+          x,
           n,
+          b,
+          d,
           r,
-          a,
-          c,
-          e,
           i,
-          o
+          s
         );
         break;
       default:
-        throw new Error(`Unknown shape type: ${c.type}`);
+        throw new Error(`Unknown shape type: ${x.type}`);
     }
   }
-  t.appendChild(r);
+  (y = c.debugQueue) == null || y.forEach((l) => {
+    c.appendChild(l);
+  }), t.appendChild(c);
 }
-function rt(t) {
-  return t.a !== 1 ? `rgba(${Math.floor(t.r)},${Math.floor(t.g)},${Math.floor(
-    t.b
-  )},${t.a.toFixed(1)})` : `rgb(${Math.floor(t.r)},${Math.floor(t.g)},${Math.floor(
-    t.b
-  )})`;
+function yt(t, e = void 0, n = void 0) {
+  n = n || /* @__PURE__ */ new Map(), e = e || E();
+  for (let o of t) {
+    const i = Ut(o);
+    if (o.type === "group" || o.type === "grid") {
+      const s = i.clone().premultiply(e);
+      yt(o.children, s, n);
+    } else {
+      const s = i.clone().premultiply(e);
+      n.set(o, s);
+    }
+  }
+  return n;
 }
-function ot(t, n, e, s, i, o, r) {
-  const a = C().makeTranslation(
-    e.position.x,
-    e.position.y,
-    e.position.z
-  ), h = C().makeScale(
-    e.scale,
-    e.scale,
-    e.scale
-  ), l = C().makeRotationX(
-    e.rotation.x * Math.PI / 180
-  ), m = C().makeRotationY(
-    e.rotation.y * Math.PI / 180
-  ), u = C().makeRotationZ(
-    e.rotation.z * Math.PI / 180
-  ), c = a.multiply(h).multiply(u).multiply(m).multiply(l), d = c.extractRotation().invert(), y = r.clone();
-  d.applyToVector3(
-    y
+function bt(t, e = [], n = "default") {
+  for (let o of t) {
+    const i = n === "background" || o.id === "background" || o.type === "grid";
+    o.type === "group" || o.type === "grid" ? bt(
+      o.children,
+      e,
+      i ? "background" : "default"
+    ) : e.push({
+      shape: o,
+      sortCategory: i ? "background" : "default"
+    });
+  }
+  return e;
+}
+function Ut(t) {
+  const e = E().makeTranslation(
+    t.position.x,
+    t.position.y,
+    t.position.z
+  ), n = E().makeScale(
+    t.scale,
+    t.scale,
+    t.scale
+  ), o = E().makeRotationX(
+    t.rotation.x / 180 * Math.PI
+  ), i = E().makeRotationY(
+    t.rotation.y / 180 * Math.PI
+  ), s = E().makeRotationZ(
+    t.rotation.z / 180 * Math.PI
   );
-  const M = t.directionalLight.direction.clone();
-  d.applyToVector3(
-    M
+  return (
+    // rotationYMatrix
+    //   .premultiply(rotationXMatrix)
+    //   .premultiply(rotationZMatrix)
+    //   .premultiply(scaleMatrix)
+    //   .premultiply(translateMatrix);
+    e.multiply(n).multiply(s).multiply(i).multiply(o)
   );
-  const f = e.mesh.vertices.map((p) => (p = p.clone(), c.applyToVector3(p), Y(
-    p,
-    o,
-    s
+}
+function Nt(t, e, n, o, i, s, a, d) {
+  const h = i.extractRotation().invert(), c = d.clone();
+  h.applyToVector3(
+    c
+  );
+  const f = t.directionalLight.direction.clone().multiply(-1);
+  h.applyToVector3(
+    f
+  );
+  const g = n.mesh.vertices.map((b) => (b = b.clone(), i.applyToVector3(b), K(
+    b,
+    a,
+    o
   )));
-  let z = 1 / 0, E = -1 / 0, w = -1 / 0, k = -1 / 0;
-  f.forEach((p) => {
-    z = Math.min(z, p.x), E = Math.max(E, p.x), w = Math.max(w, p.y), k = Math.min(k, p.y);
+  let r = 1 / 0, p = -1 / 0, m = -1 / 0, y = -1 / 0;
+  g.forEach((b) => {
+    r = Math.min(r, b.x), p = Math.max(p, b.x), m = Math.max(m, b.y), y = Math.min(y, b.y);
   });
-  const S = document.createElementNS("http://www.w3.org/2000/svg", "g");
-  S.setAttribute("transform", `translate(${z},${w})`);
-  const x = r.clone();
-  c.clone().invert().applyToVector3(x);
-  for (let p of e.mesh.faces) {
-    if (y.dotProduct(
-      p.normal
+  const l = document.createElementNS("http://www.w3.org/2000/svg", "g");
+  l.setAttribute("transform", `translate(${r},${m})`), l.id = n.id;
+  const x = d.clone();
+  i.clone().invert().applyToVector3(x);
+  for (let b of n.mesh.faces) {
+    if (c.dotProduct(
+      b.normal
     ) < 0)
       continue;
-    let I = "";
-    p.indices.forEach((R) => {
-      I += `${f[R].x - z},${f[R].y - w} `;
+    let P = "";
+    b.indices.forEach((D) => {
+      P += `${g[D].x - r},${g[D].y - m} `;
     });
-    const b = document.createElementNS(
+    const M = document.createElementNS(
       "http://www.w3.org/2000/svg",
       "polygon"
     );
-    b.setAttribute("points", I);
-    const P = M.dotProduct(
-      p.normal
-    ), A = G(
+    M.setAttribute("points", P);
+    const S = f.dotProduct(
+      b.normal
+    ), I = Y(
       t.directionalLight.color,
-      e.fill,
+      n.fill,
       t.ambientLightColor,
-      P
+      S
     );
-    b.setAttribute("fill", A), b.setAttribute("stroke-linejoin", "round"), e.strokeWidth > 0 ? (b.setAttribute("stroke", rt(e.stroke)), b.setAttribute("stroke-width", e.strokeWidth.toString())) : (b.setAttribute("stroke", A), b.setAttribute("stroke-width", it.toString())), S.appendChild(b), n.appendChild(S);
+    M.setAttribute("fill", I), M.setAttribute("stroke-linejoin", "round"), n.strokeWidth > 0 && n.stroke.a > 0 ? (M.setAttribute("stroke", q(n.stroke)), M.setAttribute(
+      "stroke-width",
+      (n.strokeWidth * s).toString()
+    )) : (M.setAttribute("stroke", I), M.setAttribute(
+      "stroke-width",
+      (Wt * s).toString()
+    )), l.appendChild(M), e.appendChild(l);
   }
 }
-function H(t, n) {
-  const e = { vertices: [], faces: [] };
-  return e.faces.push({
+function Vt(t) {
+  const e = t.elements, n = e[0], o = e[5], i = e[10], s = 2 / n, a = 2 / o, d = -2 / i;
+  return {
+    width: s,
+    height: a,
+    depth: d
+  };
+}
+function ne(t, e, n, o, i, s, a = N(0, 0, 0)) {
+  const d = e.width / 2, h = e.height / 2, c = document.createElementNS("http://www.w3.org/2000/svg", "line");
+  c.style.zIndex = "1000", c.setAttribute("x1", (n + d).toFixed(2)), c.setAttribute("y1", (o + h).toFixed(2)), c.setAttribute("x2", (i + d).toFixed(2)), c.setAttribute("y2", (s + h).toFixed(2)), c.setAttribute("stroke", q(a)), t.debugQueue || (t.debugQueue = []), t.debugQueue.push(c);
+}
+const vt = {
+  direction: u(0, -1, 0),
+  color: N(255, 255, 255)
+};
+function oe(t) {
+  return {
+    type: "directional light",
+    ...vt,
+    ...t
+  };
+}
+const xt = () => ({
+  position: u(0, 0, 0),
+  rotation: u(0, 0, 0),
+  scale: 1
+}), tt = () => ({
+  ...xt(),
+  fill: N(128, 128, 128),
+  stroke: N(0, 0, 0),
+  strokeWidth: 1,
+  id: ""
+}), Z = 100;
+function Ot(t, e) {
+  const n = { vertices: [], faces: [] };
+  return n.faces.push({
     indices: [],
-    normal: g(0, 1, 0)
-  }), e.faces.push({
+    normal: u(0, 1, 0)
+  }), n.faces.push({
     indices: [],
-    normal: g(0, -1, 0)
-  }), e.vertices = e.vertices.concat(
-    t.map((s) => g(s.x, s.y + n / 2, s.z))
-  ), e.vertices = e.vertices.concat(
-    t.map((s) => g(s.x, s.y - n / 2, s.z))
-  ), t.forEach((s, i) => {
-    e.faces[0].indices.push(i), e.faces[1].indices.push(t.length + i);
-    const o = (i + 1) % t.length;
-    e.faces.push({
+    normal: u(0, -1, 0)
+  }), n.vertices = n.vertices.concat(
+    t.map((o) => u(o.x, o.y + e / 2, o.z))
+  ), n.vertices = n.vertices.concat(
+    t.map((o) => u(o.x, o.y - e / 2, o.z))
+  ), t.forEach((o, i) => {
+    n.faces[0].indices.push(i), n.faces[1].indices.push(t.length + i);
+    const s = (i + 1) % t.length;
+    n.faces.push({
       indices: [
         i,
         i + t.length,
-        o + t.length,
-        o
+        s + t.length,
+        s
       ],
-      normal: at(e.vertices[i], e.vertices[o])
+      normal: Xt(n.vertices[i], n.vertices[s])
     });
-  }), e;
+  }), n;
 }
-function at(t, n) {
-  const e = g(n.x - t.x, 0, n.z - t.z);
-  return e.normalize(), g(e.z, 0, -e.x);
+function Xt(t, e) {
+  const n = u(e.x - t.x, 0, e.z - t.z);
+  return n.normalize(), u(n.z, 0, -n.x);
 }
-function ct(t, n, e) {
-  return H(
+function Gt(t, e, n) {
+  return Ot(
     [
-      g(-t / 2, 0, -e / 2),
-      g(t / 2, 0, -e / 2),
-      g(t / 2, 0, e / 2),
-      g(-t / 2, 0, e / 2)
+      u(-t / 2, 0, -n / 2),
+      u(t / 2, 0, -n / 2),
+      u(t / 2, 0, n / 2),
+      u(-t / 2, 0, n / 2)
     ],
-    n
+    e
   );
 }
-function xt(t) {
+const H = {
+  width: Z,
+  height: Z,
+  depth: Z,
+  id: "box"
+};
+function gt(t) {
+  const e = {
+    width: t.width || H.width,
+    height: t.height || H.height,
+    depth: t.depth || H.depth
+  };
   return {
     type: "mesh",
-    mesh: ct(t.width, t.height, t.depth),
-    position: t.position,
-    rotation: t.rotation,
-    scale: t.scale,
-    fill: t.fill,
-    stroke: t.stroke,
-    strokeWidth: t.strokeWidth
+    mesh: Gt(e.width, e.height, e.depth),
+    ...tt(),
+    id: t.id || H.id,
+    ...t
   };
 }
-function ht(t, n) {
-  const e = [];
-  for (let s = 0; s < n; s++)
-    e.push(
-      g(
-        Math.cos(s / n * 2 * Math.PI) * t,
+const jt = {
+  cellCount: 10,
+  cellSize: 100,
+  ...tt()
+};
+function ie(t) {
+  const e = {
+    type: "grid",
+    children: [],
+    position: u(0, 0, 0),
+    scale: 1,
+    ...jt,
+    ...t
+  };
+  for (let n = 0; n <= e.cellCount; n++) {
+    const o = gt({
+      position: u(
         0,
-        Math.sin(s / n * 2 * Math.PI) * t
-      )
-    );
+        0,
+        n * e.cellSize - e.cellSize * e.cellCount / 2
+        /*+ props.cellSize / 2*/
+      ),
+      rotation: u(0, 0, 0),
+      scale: 1,
+      width: e.cellCount * e.cellSize,
+      height: t.strokeWidth,
+      depth: t.strokeWidth,
+      fill: t.stroke,
+      stroke: N(0, 0, 0),
+      strokeWidth: 0
+    });
+    e.children.push(o);
+    const i = gt({
+      position: u(
+        n * e.cellSize - e.cellSize * e.cellCount / 2,
+        0,
+        0
+        /*+ props.cellSize / 2*/
+      ),
+      rotation: u(0, 0, 0),
+      scale: 1,
+      width: t.strokeWidth,
+      height: t.strokeWidth,
+      depth: e.cellCount * e.cellSize,
+      fill: t.stroke,
+      stroke: N(0, 0, 0),
+      strokeWidth: 0
+    });
+    e.children.push(i);
+  }
   return e;
 }
-function lt(t, n, e) {
-  return H(ht(t, e), n);
+const Bt = {
+  id: "",
+  children: []
+};
+function se(t) {
+  return {
+    type: "group",
+    ...xt(),
+    ...Bt,
+    ...t
+  };
 }
-function bt(t) {
+const Zt = {
+  radius: Z / 2,
+  height: Z,
+  ...tt()
+};
+function re(t) {
   return {
-    type: "mesh",
-    mesh: lt(t.radius, t.height, t.segments),
-    position: t.position,
-    rotation: t.rotation,
-    scale: t.scale,
-    fill: t.fill,
-    stroke: t.stroke,
-    strokeWidth: t.strokeWidth
+    type: "cylinder",
+    ...Zt,
+    ...t
   };
 }
-function pt(t) {
+const Yt = {
+  radius: Z / 2,
+  ...tt()
+};
+function ce(t) {
   return {
     type: "sphere",
-    radius: t.radius,
-    position: t.position,
-    rotation: t.rotation,
-    scale: t.scale,
-    fill: t.fill,
-    stroke: t.stroke,
-    strokeWidth: t.strokeWidth
+    ...Yt,
+    ...t
   };
 }
 export {
-  Mt as Blue,
-  xt as Box,
-  ct as BoxMesh,
-  ut as Camera,
-  W as Color,
-  tt as ColorToCSS,
-  bt as Cylinder,
-  lt as CylinderMesh,
-  yt as Green,
-  C as Matrix4x4,
-  dt as Red,
-  pt as Sphere,
-  g as Vector3,
-  mt as point3DToCabinet,
-  ft as point3DToIsometric,
-  Y as projectToScreenCoordinate,
-  gt as render
+  te as Blue,
+  gt as Box,
+  Gt as BoxMesh,
+  _t as Camera,
+  N as Color,
+  q as ColorToCSS,
+  re as Cylinder,
+  ne as DebugLine2D,
+  tt as DefaultBasicShapeProperties,
+  Z as DefaultShapeDimension,
+  xt as DefaultTransformProperties,
+  oe as DirectionalLight,
+  Kt as Green,
+  ie as Grid,
+  se as Group,
+  E as Matrix4x4,
+  Jt as Red,
+  ce as Sphere,
+  u as Vector3,
+  Y as applyLighting,
+  Ht as point3DToCabinet,
+  Qt as point3DToIsometric,
+  K as projectToScreenCoordinate,
+  ee as render
 };

package.json

 {
   "name": "skewed",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Generate 3D isometric SVGs",
@@ -5,0 +5,0 @@ "author": "Francois Laberge",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

79194

increased by38.72%

Number of package files

28

increased by12%

Lines of code

1766

increased by44.05%

No dependency changes