npm - pipes-3d - Versions diffs - 0.1.0 - Mend

pipes-3d 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2024 Matthew
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,173 @@
+# pipes-3d
+A framework-agnostic 3D animated pipes visualization using Three.js.
+![License](https://img.shields.io/badge/license-MIT-blue.svg)
+![npm version](https://img.shields.io/npm/v/pipes-3d.svg)
+## Installation
+```bash
+npm install pipes-3d three
+```
+> **Note:** Three.js is a peer dependency. You must install it alongside pipes-3d.
+## Quick Start
+### Vanilla JavaScript/TypeScript
+```typescript
+import { PipesRenderer } from 'pipes-3d';
+// Get your container element
+const container = document.getElementById('pipes-container');
+// Create and start the renderer
+const renderer = new PipesRenderer(container);
+renderer.start();
+// Later, when you're done:
+renderer.stop();    // Pause the animation
+renderer.reset();   // Clear and restart
+renderer.dispose(); // Clean up and remove from DOM
+```
+### React
+```tsx
+import { useEffect, useRef } from 'react';
+import { PipesRenderer } from 'pipes-3d';
+function PipesVisualization() {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const rendererRef = useRef<PipesRenderer | null>(null);
+  useEffect(() => {
+    if (!containerRef.current) return;
+    // Create and start renderer
+    rendererRef.current = new PipesRenderer(containerRef.current);
+    rendererRef.current.start();
+    // Cleanup on unmount
+    return () => {
+      rendererRef.current?.dispose();
+    };
+  }, []);
+  return <div ref={containerRef} style={{ width: '100%', height: '100vh' }} />;
+}
+```
+### Vue 3
+```vue
+<template>
+  <div ref="container" class="pipes-container"></div>
+</template>
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { PipesRenderer } from 'pipes-3d';
+const container = ref<HTMLDivElement>();
+let renderer: PipesRenderer | null = null;
+onMounted(() => {
+  if (container.value) {
+    renderer = new PipesRenderer(container.value);
+    renderer.start();
+  }
+});
+onUnmounted(() => {
+  renderer?.dispose();
+});
+</script>
+<style scoped>
+.pipes-container {
+  width: 100%;
+  height: 100vh;
+}
+</style>
+```
+## API Reference
+### `PipesRenderer`
+The main class for rendering animated pipes.
+#### Constructor
+```typescript
+new PipesRenderer(container: HTMLElement)
+```
+Creates a new pipes renderer and attaches it to the specified container element.
+#### Methods
+##### `start(): void`
+Starts the animation loop. Call this after creating the renderer.
+##### `stop(): void`
+Pauses the animation. The scene remains visible but stops updating.
+##### `reset(): void`
+Clears the current scene and generates a new pipe path. Animation continues if it was running.
+##### `dispose(): void`
+Stops the animation, removes event listeners, and removes the canvas from the DOM. Call this when you're done with the renderer to prevent memory leaks.
+## Keyboard Controls
+- **Enter**: Reset the scene and start a new pipe generation
+## Browser Support
+Requires a browser with WebGL support. Works in all modern browsers (Chrome, Firefox, Safari, Edge).
+## Development
+### Running the Demo
+```bash
+# Install dependencies
+npm install
+# Run development server
+npm run dev
+# Build the library
+npm run build
+# Type check
+npm run type-check
+# Lint
+npm run lint
+# Format
+npm run format
+```
+## License
+MIT © [perrymatthew525](https://github.com/perrymatthew525)
+## Contributing
+Contributions are welcome! Please feel free to submit a pull request.
+## Links
+- [GitHub Repository](https://github.com/perrymatthew525/Pipes)
+- [npm Package](https://www.npmjs.com/package/pipes-3d)
+- [Report Issues](https://github.com/perrymatthew525/Pipes/issues)

package/dist/favicon.ico ADDED Viewed

Binary file

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,83 @@
+import * as THREE_2 from 'three';
+export declare interface BanDirection {
+    posX?: boolean;
+    negX?: boolean;
+    posY?: boolean;
+    negY?: boolean;
+    posZ?: boolean;
+    negZ?: boolean;
+}
+export declare type Direction = "+x" | "-x" | "+y" | "-y" | "+z" | "-z";
+export declare class Elbow {
+    private radius;
+    private tube;
+    constructor(radius: number, tube: number);
+    getElbow(startVector: THREE_2.Vector3, startDirection: Direction, endDirection: Direction, color?: THREE_2.Color): THREE_2.Mesh;
+}
+export declare class PipesRenderer {
+    private container;
+    private renderer;
+    private scene;
+    private camera;
+    private controls;
+    private clock;
+    private elbow;
+    private animationId;
+    private isRunning;
+    private readonly MAX_POINTS;
+    private readonly MAX_PIPES;
+    private readonly RESET_PIPES;
+    private readonly PIPE_RADIUS;
+    private readonly MIN_PIPE_LENGTH;
+    private readonly MAX_PIPE_LENGTH;
+    private readonly PIPES_PER_S;
+    private readonly BOUNDING_BOX;
+    private readonly BOUND_POS_X;
+    private readonly BOUND_NEG_X;
+    private readonly BOUND_POS_Y;
+    private readonly BOUND_NEG_Y;
+    private readonly BOUND_POS_Z;
+    private readonly BOUND_NEG_Z;
+    private randomColor;
+    private randomSaturation;
+    private drawCount;
+    private pipeCount;
+    private xPositions;
+    private yPositions;
+    private zPositions;
+    private direction;
+    private boundKeyHandler;
+    constructor(container: HTMLElement);
+    private handleResize;
+    private handleKeyDown;
+    private pipe;
+    private getRandomDirection;
+    private generatePoints;
+    private resetColor;
+    private resetDraw;
+    private resetClock;
+    private clearScene;
+    private animate;
+    /**
+     * Start the pipes animation
+     */
+    start(): void;
+    /**
+     * Stop the pipes animation
+     */
+    stop(): void;
+    /**
+     * Reset the scene and start fresh
+     */
+    reset(): void;
+    /**
+     * Clean up resources and remove from DOM
+     */
+    dispose(): void;
+}
+export { }

package/dist/pipes-3d.es.js ADDED Viewed

@@ -0,0 +1,383 @@
+var I = Object.defineProperty;
+var y = (P, i, s) => i in P ? I(P, i, { enumerable: !0, configurable: !0, writable: !0, value: s }) : P[i] = s;
+var r = (P, i, s) => (y(P, typeof i != "symbol" ? i + "" : i, s), s);
+import * as e from "three";
+import { OrbitControls as m } from "three/addons/controls/OrbitControls.js";
+class f {
+  constructor(i, s) {
+    r(this, "radius");
+    r(this, "tube");
+    this.radius = i, this.tube = s;
+  }
+  getElbow(i, s, n, l) {
+    const o = this.radius / 2, h = this.radius / 2, a = this.radius / 2, d = new e.MeshBasicMaterial({ color: 16711680 });
+    l !== void 0 && d.color.set(l);
+    const t = new e.TorusGeometry(
+      this.radius,
+      this.tube,
+      16,
+      100,
+      Math.PI / 2
+    );
+    return t.applyMatrix4(
+      new e.Matrix4().makeTranslation(-o, -h, 0)
+    ), s === "+x" && (n === "+z" && (t.rotateX(-Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x + o,
+        i.y,
+        i.z + a
+      )
+    )), n === "-z" && (t.rotateX(Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x + o,
+        i.y,
+        i.z - a
+      )
+    )), n === "+y" && (t.rotateX(Math.PI), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x + o,
+        i.y + h,
+        i.z
+      )
+    )), n === "-y" && t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x + o,
+        i.y - h,
+        i.z
+      )
+    )), s === "-x" && (n === "+z" && (t.rotateY(Math.PI), t.rotateX(-Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x - o,
+        i.y,
+        i.z + a
+      )
+    )), n === "-z" && (t.rotateY(Math.PI), t.rotateX(Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x - o,
+        i.y,
+        i.z - a
+      )
+    )), n === "+y" && (t.rotateZ(Math.PI), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x - o,
+        i.y + h,
+        i.z
+      )
+    )), n === "-y" && (t.rotateZ(Math.PI), t.rotateX(Math.PI), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x - o,
+        i.y - h,
+        i.z
+      )
+    ))), s === "+y" && (n === "+x" && (t.rotateZ(Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x + o,
+        i.y + h,
+        i.z
+      )
+    )), n === "-x" && (t.rotateY(-Math.PI), t.rotateZ(-Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x - o,
+        i.y + h,
+        i.z
+      )
+    )), n === "+z" && (t.rotateZ(Math.PI / 2), t.rotateY(-Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x,
+        i.y + h,
+        i.z + a
+      )
+    )), n === "-z" && (t.rotateZ(Math.PI / 2), t.rotateY(Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x,
+        i.y + h,
+        i.z - a
+      )
+    ))), s === "-y" && (n === "+x" && (t.rotateZ(Math.PI), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x + o,
+        i.y - h,
+        i.z
+      )
+    )), n === "-x" && (t.rotateZ(Math.PI), t.rotateY(Math.PI), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x - o,
+        i.y - h,
+        i.z
+      )
+    )), n === "+z" && (t.rotateZ(Math.PI), t.rotateY(-Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x,
+        i.y - h,
+        i.z + a
+      )
+    )), n === "-z" && (t.rotateZ(Math.PI), t.rotateY(Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x,
+        i.y - h,
+        i.z - a
+      )
+    ))), s === "+z" && (n === "+x" && (t.rotateY(-Math.PI / 2), t.rotateZ(Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x + o,
+        i.y,
+        i.z + a
+      )
+    )), n === "-x" && (t.rotateX(-Math.PI / 2), t.rotateY(-Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x - o,
+        i.y,
+        i.z + a
+      )
+    )), n === "+y" && (t.rotateZ(Math.PI), t.rotateY(Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x,
+        i.y + h,
+        i.z + a
+      )
+    )), n === "-y" && (t.rotateY(-Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x,
+        i.y - h,
+        i.z + a
+      )
+    ))), s === "-z" && (n === "+x" && (t.rotateX(-Math.PI / 2), t.rotateY(Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x + o,
+        i.y,
+        i.z - a
+      )
+    )), n === "-x" && (t.rotateX(Math.PI / 2), t.rotateY(Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x - o,
+        i.y,
+        i.z - a
+      )
+    )), n === "+y" && (t.rotateX(Math.PI), t.rotateY(Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x,
+        i.y + h,
+        i.z - a
+      )
+    )), n === "-y" && (t.rotateY(Math.PI / 2), t.applyMatrix4(
+      new e.Matrix4().makeTranslation(
+        i.x,
+        i.y - h,
+        i.z - a
+      )
+    ))), new e.Mesh(t, d);
+  }
+}
+function _(P, i) {
+  return Math.floor(Math.random() * (i - P) + P);
+}
+function x(P, i) {
+  return Math.random() * (i - P) + P;
+}
+const M = /* @__PURE__ */ new Map([
+  [0, "+x"],
+  [1, "-x"],
+  [2, "+y"],
+  [3, "-y"],
+  [4, "+z"],
+  [5, "-z"]
+]);
+class z {
+  constructor(i) {
+    r(this, "container");
+    r(this, "renderer");
+    r(this, "scene");
+    r(this, "camera");
+    r(this, "controls");
+    r(this, "clock");
+    r(this, "elbow");
+    r(this, "animationId", null);
+    r(this, "isRunning", !1);
+    // Configuration constants
+    r(this, "MAX_POINTS", 250);
+    r(this, "MAX_PIPES", 6);
+    r(this, "RESET_PIPES", !0);
+    r(this, "PIPE_RADIUS", 1);
+    r(this, "MIN_PIPE_LENGTH", 5);
+    r(this, "MAX_PIPE_LENGTH", 20);
+    r(this, "PIPES_PER_S", 40);
+    r(this, "BOUNDING_BOX", 50);
+    r(this, "BOUND_POS_X", 150);
+    r(this, "BOUND_NEG_X", -150);
+    r(this, "BOUND_POS_Y", this.BOUNDING_BOX);
+    r(this, "BOUND_NEG_Y", -this.BOUNDING_BOX);
+    r(this, "BOUND_POS_Z", this.BOUNDING_BOX);
+    r(this, "BOUND_NEG_Z", -150);
+    // State
+    r(this, "randomColor", Math.random());
+    r(this, "randomSaturation", Math.random());
+    r(this, "drawCount", 0);
+    r(this, "pipeCount", 0);
+    r(this, "xPositions");
+    r(this, "yPositions");
+    r(this, "zPositions");
+    r(this, "direction");
+    r(this, "boundKeyHandler");
+    r(this, "animate", () => {
+      if (!this.isRunning)
+        return;
+      const i = this.clock.getElapsedTime();
+      if (this.drawCount < this.MAX_POINTS - 1 && i > 1 / this.PIPES_PER_S) {
+        this.resetClock();
+        const s = new e.Vector3(
+          this.xPositions[this.drawCount],
+          this.yPositions[this.drawCount],
+          this.zPositions[this.drawCount]
+        ), n = new e.Vector3(
+          this.xPositions[this.drawCount + 1],
+          this.yPositions[this.drawCount + 1],
+          this.zPositions[this.drawCount + 1]
+        ), l = M.get(this.direction[this.drawCount + 1]), o = l !== M.get(this.direction[this.drawCount]), h = l !== M.get(this.direction[this.drawCount + 2]), a = this.PIPE_RADIUS;
+        switch (l) {
+          case "+x":
+            o && s.add(new e.Vector3(a, 0, 0)), h && n.add(new e.Vector3(-a, 0, 0));
+            break;
+          case "-x":
+            o && s.add(new e.Vector3(-a, 0, 0)), h && n.add(new e.Vector3(a, 0, 0));
+            break;
+          case "+y":
+            o && s.add(new e.Vector3(0, a, 0)), h && n.add(new e.Vector3(0, -a, 0));
+            break;
+          case "-y":
+            o && s.add(new e.Vector3(0, -a, 0)), h && n.add(new e.Vector3(0, a, 0));
+            break;
+          case "+z":
+            o && s.add(new e.Vector3(0, 0, a)), h && n.add(new e.Vector3(0, 0, -a));
+            break;
+          case "-z":
+            o && s.add(new e.Vector3(0, 0, -a)), h && n.add(new e.Vector3(0, 0, a));
+            break;
+        }
+        this.pipe(s, n), this.drawCount++;
+      }
+      this.drawCount === this.MAX_POINTS - 1 && (this.pipeCount++, this.resetDraw(), this.pipeCount === this.MAX_PIPES && this.clearScene()), this.controls.update(), this.renderer.render(this.scene, this.camera), this.animationId = requestAnimationFrame(this.animate);
+    });
+    this.container = i, this.xPositions = new Float32Array(this.MAX_POINTS), this.yPositions = new Float32Array(this.MAX_POINTS), this.zPositions = new Float32Array(this.MAX_POINTS), this.direction = new Array(this.MAX_POINTS), this.renderer = new e.WebGLRenderer({ antialias: !0 }), this.renderer.setSize(i.clientWidth, i.clientHeight), this.renderer.setPixelRatio(window.devicePixelRatio), this.scene = new e.Scene(), this.camera = new e.PerspectiveCamera(
+      75,
+      i.clientWidth / i.clientHeight,
+      0.1,
+      1e3
+    ), this.camera.position.set(0, 0, 100), this.camera.lookAt(0, 0, 0), this.controls = new m(this.camera, this.renderer.domElement), this.clock = new e.Clock(), this.elbow = new f(this.PIPE_RADIUS, this.PIPE_RADIUS), this.renderer.render(this.scene, this.camera), this.container.appendChild(this.renderer.domElement), this.boundKeyHandler = this.handleKeyDown.bind(this), document.addEventListener("keydown", this.boundKeyHandler), window.addEventListener("resize", this.handleResize.bind(this));
+  }
+  handleResize() {
+    const i = this.container.clientWidth, s = this.container.clientHeight;
+    this.camera.aspect = i / s, this.camera.updateProjectionMatrix(), this.renderer.setSize(i, s);
+  }
+  handleKeyDown(i) {
+    i.key === "Enter" && this.reset();
+  }
+  pipe(i, s) {
+    const n = new e.Vector3().subVectors(s, i), l = M.get(this.direction[this.drawCount + 1]), o = M.get(this.direction[this.drawCount + 2]), h = new e.CylinderGeometry(
+      this.PIPE_RADIUS,
+      this.PIPE_RADIUS,
+      n.length(),
+      16
+    );
+    h.applyMatrix4(
+      new e.Matrix4().makeTranslation(0, n.length() / 2, 0)
+    ), h.applyMatrix4(new e.Matrix4().makeRotationX(Math.PI / 2));
+    const a = new e.MeshBasicMaterial();
+    a.color.setHSL(this.randomColor, this.randomSaturation, 0.5);
+    const d = new e.Mesh(h, a);
+    if (d.position.copy(i), d.lookAt(s), this.scene.add(d), l && o && l !== o) {
+      const t = new e.Color(0, 0, 0);
+      a.color.getRGB(t);
+      const p = this.elbow.getElbow(s, l, o, t);
+      this.scene.add(p);
+    }
+  }
+  getRandomDirection(i) {
+    const s = [];
+    i != null && i.posX || s.push(0), i != null && i.negX || s.push(1), i != null && i.posY || s.push(2), i != null && i.negY || s.push(3), i != null && i.posZ || s.push(4), i != null && i.negZ || s.push(5);
+    const n = _(0, s.length);
+    return s[n];
+  }
+  generatePoints() {
+    let i = 0, s = 0, n = 0;
+    for (let l = 0; l < this.MAX_POINTS; l++) {
+      const o = l > 0 ? M.get(this.direction[l - 1]) : void 0, h = {
+        posX: !1,
+        negX: !1,
+        posY: !1,
+        negY: !1,
+        posZ: !1,
+        negZ: !1
+      };
+      if (l > 0) {
+        const t = this.xPositions[l - 1], p = this.yPositions[l - 1], w = this.zPositions[l - 1];
+        t > this.BOUND_POS_X && (h.posX = !0), t < this.BOUND_NEG_X && (h.negX = !0), p > this.BOUND_POS_Y && (h.posY = !0), p < this.BOUND_NEG_Y && (h.negY = !0), w > this.BOUND_POS_Z && (h.posZ = !0), w < this.BOUND_NEG_Z && (h.negZ = !0);
+      }
+      let a = this.getRandomDirection(h);
+      if (l > 0 && o)
+        for (; o === "-x" && M.get(a) === "+x" || o === "+x" && M.get(a) === "-x" || o === "-y" && M.get(a) === "+y" || o === "+y" && M.get(a) === "-y" || o === "-z" && M.get(a) === "+z" || o === "+z" && M.get(a) === "-z"; )
+          a = this.getRandomDirection(h);
+      switch (M.get(a)) {
+        case "+x":
+          i += x(this.MIN_PIPE_LENGTH, this.MAX_PIPE_LENGTH);
+          break;
+        case "-x":
+          i -= x(this.MIN_PIPE_LENGTH, this.MAX_PIPE_LENGTH);
+          break;
+        case "+y":
+          s += x(this.MIN_PIPE_LENGTH, this.MAX_PIPE_LENGTH);
+          break;
+        case "-y":
+          s -= x(this.MIN_PIPE_LENGTH, this.MAX_PIPE_LENGTH);
+          break;
+        case "+z":
+          n += x(this.MIN_PIPE_LENGTH, this.MAX_PIPE_LENGTH);
+          break;
+        case "-z":
+          n -= x(this.MIN_PIPE_LENGTH, this.MAX_PIPE_LENGTH);
+          break;
+      }
+      this.direction[l] = a, this.xPositions[l] = i, this.yPositions[l] = s, this.zPositions[l] = n;
+    }
+  }
+  resetColor() {
+    const i = this.randomColor + 0.37;
+    this.randomColor = i % 1, this.randomSaturation = x(0, 1);
+  }
+  resetDraw() {
+    this.RESET_PIPES && (this.drawCount = 0, this.resetColor(), this.generatePoints());
+  }
+  resetClock() {
+    this.clock.stop(), this.clock.start();
+  }
+  clearScene() {
+    this.pipeCount = 0, this.scene.clear();
+  }
+  /**
+   * Start the pipes animation
+   */
+  start() {
+    this.isRunning || (this.isRunning = !0, this.clock.start(), this.generatePoints(), this.animate());
+  }
+  /**
+   * Stop the pipes animation
+   */
+  stop() {
+    this.isRunning = !1, this.animationId !== null && (cancelAnimationFrame(this.animationId), this.animationId = null), this.clock.stop();
+  }
+  /**
+   * Reset the scene and start fresh
+   */
+  reset() {
+    this.clearScene(), this.resetDraw();
+  }
+  /**
+   * Clean up resources and remove from DOM
+   */
+  dispose() {
+    this.stop(), document.removeEventListener("keydown", this.boundKeyHandler), window.removeEventListener("resize", this.handleResize.bind(this)), this.controls.dispose(), this.renderer.dispose(), this.container.removeChild(this.renderer.domElement);
+  }
+}
+export {
+  f as Elbow,
+  z as PipesRenderer
+};

package/dist/pipes-3d.umd.js ADDED Viewed

@@ -0,0 +1 @@

package/package.json ADDED Viewed

@@ -0,0 +1,78 @@
+{
+  "name": "pipes-3d",
+  "version": "0.1.0",
+  "description": "A 3D animated pipes visualization using Three.js",
+  "private": false,
+  "type": "module",
+  "license": "MIT",
+  "keywords": [
+    "three",
+    "threejs",
+    "3d",
+    "pipes",
+    "visualization",
+    "animation",
+    "webgl",
+    "screensaver"
+  ],
+  "author": "perrymatthew525",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/perrymatthew525/Pipes.git"
+  },
+  "homepage": "https://github.com/perrymatthew525/Pipes#readme",
+  "bugs": {
+    "url": "https://github.com/perrymatthew525/Pipes/issues"
+  },
+  "main": "./dist/pipes-3d.umd.js",
+  "module": "./dist/pipes-3d.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/pipes-3d.es.js",
+      "require": "./dist/pipes-3d.umd.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "build:demo": "vite build --config vite.demo.config.ts",
+    "preview": "vite preview",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/ lib/",
+    "prepublishOnly": "npm run build"
+  },
+  "peerDependencies": {
+    "three": ">=0.150.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@tsconfig/node18": "^2.0.1",
+    "@types/node": "^18.16.8",
+    "@types/three": "^0.152.1",
+    "@typescript-eslint/eslint-plugin": "^5.59.11",
+    "@typescript-eslint/parser": "^5.59.11",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/tsconfig": "^0.4.0",
+    "eslint": "^8.42.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-config-standard-with-typescript": "^35.0.0",
+    "eslint-plugin-vue": "^9.14.1",
+    "npm-run-all": "^4.1.5",
+    "prettier": "2.8.8",
+    "three": "^0.153.0",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.5",
+    "vite-plugin-dts": "^3.9.1",
+    "vue": "^3.3.2",
+    "vue-router": "^4.2.0",
+    "vue-tsc": "^1.6.4"
+  }
+}