react-three-nurbs 0.1.0

package/README.md

@@ -0,0 +1,198 @@
+# react-three-nurbs
+
+A React component library for rendering NURBS (Non-Uniform Rational B-Spline) surfaces in Three.js. Built with React Three Fiber, this library provides an easy way to create and visualize complex curved surfaces in your 3D applications.
+
+## Features
+
+- 🎯 Simple React component API for NURBS surfaces
+- 📐 Support for arbitrary degree NURBS surfaces
+- 🎨 Customizable surface appearance with R3F materials
+- 🔄 Automatic normal calculation for proper lighting
+- 🎮 Interactive 3D visualization with React Three Fiber
+- 📦 Written in TypeScript with full type support
+- 🎨 Compatible with drei's Line component for curves
+
+## Installation
+
+```bash
+npm install react-three-nurbs
+```
+
+## Quick Start
+
+### Surface with Default Material
+
+```tsx
+import { NurbsSurface } from 'react-three-nurbs'
+import { Canvas } from '@react-three/fiber'
+
+function App() {
+  // Define a simple 4x4 control point grid for a surface
+  const controlPoints = [
+    [[-1, -1, 0], [-1, -0.5, 0], [-1, 0.5, 0], [-1, 1, 0]],
+    [[-0.5, -1, 0], [-0.5, -0.5, 1], [-0.5, 0.5, 1], [-0.5, 1, 0]],
+    [[0.5, -1, 0], [0.5, -0.5, 1], [0.5, 0.5, 1], [0.5, 1, 0]],
+    [[1, -1, 0], [1, -0.5, 0], [1, 0.5, 0], [1, 1, 0]]
+  ]
+
+  // Define weights for each control point (1.0 for uniform B-spline)
+  const weights = [
+    [1, 1, 1, 1],
+    [1, 1, 1, 1],
+    [1, 1, 1, 1],
+    [1, 1, 1, 1]
+  ]
+
+  return (
+    <Canvas>
+      <ambientLight intensity={0.5} />
+      <pointLight position={[10, 10, 10]} />
+      <NurbsSurface
+        controlPoints={controlPoints}
+        weights={weights}
+        degreeU={3}
+        degreeV={3}
+        color="#ff0000"
+        wireframe={false}
+      />
+    </Canvas>
+  )
+}
+```
+
+### Surface with Custom Material
+
+```tsx
+import { NurbsSurface } from 'react-three-nurbs'
+import { Canvas } from '@react-three/fiber'
+import { MeshStandardMaterial } from 'three'
+
+function App() {
+  // ... control points and weights as above ...
+
+  return (
+    <Canvas>
+      <ambientLight intensity={0.5} />
+      <pointLight position={[10, 10, 10]} />
+      <NurbsSurface
+        controlPoints={controlPoints}
+        weights={weights}
+        degreeU={3}
+        degreeV={3}
+        position={[0, 0, 0]}
+        rotation={[0, Math.PI / 4, 0]}
+      >
+        <meshStandardMaterial
+          color="#00ff00"
+          metalness={0.5}
+          roughness={0.5}
+          wireframe={true}
+        />
+      </NurbsSurface>
+    </Canvas>
+  )
+}
+```
+
+### NURBS Curve
+
+```tsx
+import { NurbsCurve } from 'react-three-nurbs'
+import { Canvas } from '@react-three/fiber'
+
+function App() {
+  const points = [
+    [0, 0, 0],
+    [1, 1, 0],
+    [2, 0, 0],
+    [3, 1, 0],
+    [4, 0, 0],
+  ]
+
+  const knots = [0, 0, 0, 0.5, 1, 1, 1]
+
+  return (
+    <Canvas>
+      <NurbsCurve
+        points={points}
+        knots={knots}
+        degree={2}
+        color="red"
+        dashed={true}
+        segments={true}
+        vertexColors={[
+          [1, 0, 0], // red
+          [0, 1, 0], // green
+          [0, 0, 1], // blue
+          [1, 1, 0], // yellow
+          [1, 0, 1], // magenta
+        ]}
+      />
+    </Canvas>
+  )
+}
+```
+
+## Props
+
+### NurbsSurface Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `controlPoints` | `number[][][]` | Yes | - | 3D control points grid defining the surface shape |
+| `weights` | `number[][]` | Yes | - | Weights for each control point |
+| `degreeU` | `number` | Yes | - | Degree of the surface in U direction |
+| `degreeV` | `number` | Yes | - | Degree of the surface in V direction |
+| `color` | `string` | No | `'#ffffff'` | Surface color (only used if no material is provided) |
+| `wireframe` | `boolean` | No | `false` | Whether to render as wireframe (only used if no material is provided) |
+| `children` | `ReactElement` | No | - | Material component (e.g., `meshStandardMaterial`, `meshPhongMaterial`) |
+| `...meshProps` | `MeshProps` | No | - | All React Three Fiber mesh props are supported |
+
+### NurbsCurve Props
+
+| Prop | Type | Required | Default | Description |
+|------|------|----------|---------|-------------|
+| `points` | `number[][]` | Yes | - | Control points defining the curve shape |
+| `knots` | `number[]` | Yes | - | Knot vector defining the curve parameterization |
+| `degree` | `number` | No | `3` | Degree of the curve |
+| `weights` | `number[]` | No | `[1, 1, ...]` | Weights for each control point |
+| `curveResolution` | `number` | No | `50` | Number of points to sample along the curve |
+| `color` | `string` | No | `'black'` | Line color |
+| `segments` | `boolean` | No | `false` | Whether to render as line segments |
+| `dashed` | `boolean` | No | `false` | Whether to render as dashed line |
+| `vertexColors` | `number[][]` | No | - | RGB colors for each vertex |
+| `...lineProps` | `LineProps` | No | - | All drei Line component props are supported |
+
+## Development
+
+This project is built with:
+- [React](https://reactjs.org/)
+- [Three.js](https://threejs.org/)
+- [React Three Fiber](https://github.com/pmndrs/react-three-fiber)
+- [verb-nurbs](https://github.com/pboyer/verb) for NURBS calculations
+- [Vite](https://vitejs.dev/) for building
+- [TypeScript](https://www.typescriptlang.org/) for type safety
+
+### Setup
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server
+npm run dev
+
+# Build the library
+npm run build
+
+# Run Storybook
+npm run storybook
+```
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/index.js

@@ -0,0 +1,821 @@
+import Ne, { useMemo as Me, useState as pr, useEffect as mr, isValidElement as Ye, Children as br } from "react";
+import { Vector3 as hr, BufferGeometry as yr, Float32BufferAttribute as Ie, MeshPhongMaterial as gr, DoubleSide as Er, Color as _r, Mesh as Rr } from "three";
+import ue from "verb-nurbs";
+import { Line as Sr } from "@react-three/drei";
+import { useThree as Cr } from "@react-three/fiber";
+var ge = { exports: {} }, ee = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var We;
+function Tr() {
+  if (We) return ee;
+  We = 1;
+  var T = Ne, x = Symbol.for("react.element"), y = Symbol.for("react.fragment"), c = Object.prototype.hasOwnProperty, k = T.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentOwner, F = { key: !0, ref: !0, __self: !0, __source: !0 };
+  function _(g, f, E) {
+    var p, m = {}, R = null, D = null;
+    E !== void 0 && (R = "" + E), f.key !== void 0 && (R = "" + f.key), f.ref !== void 0 && (D = f.ref);
+    for (p in f) c.call(f, p) && !F.hasOwnProperty(p) && (m[p] = f[p]);
+    if (g && g.defaultProps) for (p in f = g.defaultProps, f) m[p] === void 0 && (m[p] = f[p]);
+    return { $$typeof: x, type: g, key: R, ref: D, props: m, _owner: k.current };
+  }
+  return ee.Fragment = y, ee.jsx = _, ee.jsxs = _, ee;
+}
+var re = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var $e;
+function wr() {
+  return $e || ($e = 1, process.env.NODE_ENV !== "production" && function() {
+    var T = Ne, x = Symbol.for("react.element"), y = Symbol.for("react.portal"), c = Symbol.for("react.fragment"), k = Symbol.for("react.strict_mode"), F = Symbol.for("react.profiler"), _ = Symbol.for("react.provider"), g = Symbol.for("react.context"), f = Symbol.for("react.forward_ref"), E = Symbol.for("react.suspense"), p = Symbol.for("react.suspense_list"), m = Symbol.for("react.memo"), R = Symbol.for("react.lazy"), D = Symbol.for("react.offscreen"), S = Symbol.iterator, b = "@@iterator";
+    function v(e) {
+      if (e === null || typeof e != "object")
+        return null;
+      var r = S && e[S] || e[b];
+      return typeof r == "function" ? r : null;
+    }
+    var C = T.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
+    function s(e) {
+      {
+        for (var r = arguments.length, t = new Array(r > 1 ? r - 1 : 0), n = 1; n < r; n++)
+          t[n - 1] = arguments[n];
+        W("error", e, t);
+      }
+    }
+    function W(e, r, t) {
+      {
+        var n = C.ReactDebugCurrentFrame, i = n.getStackAddendum();
+        i !== "" && (r += "%s", t = t.concat([i]));
+        var u = t.map(function(o) {
+          return String(o);
+        });
+        u.unshift("Warning: " + r), Function.prototype.apply.call(console[e], console, u);
+      }
+    }
+    var H = !1, U = !1, ce = !1, fe = !1, w = !1, l;
+    l = Symbol.for("react.module.reference");
+    function $(e) {
+      return !!(typeof e == "string" || typeof e == "function" || e === c || e === F || w || e === k || e === E || e === p || fe || e === D || H || U || ce || typeof e == "object" && e !== null && (e.$$typeof === R || e.$$typeof === m || e.$$typeof === _ || e.$$typeof === g || e.$$typeof === f || // This needs to include all possible module reference object
+      // types supported by any Flight configuration anywhere since
+      // we don't know which Flight build this will end up being used
+      // with.
+      e.$$typeof === l || e.getModuleId !== void 0));
+    }
+    function N(e, r, t) {
+      var n = e.displayName;
+      if (n)
+        return n;
+      var i = r.displayName || r.name || "";
+      return i !== "" ? t + "(" + i + ")" : t;
+    }
+    function B(e) {
+      return e.displayName || "Context";
+    }
+    function j(e) {
+      if (e == null)
+        return null;
+      if (typeof e.tag == "number" && s("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), typeof e == "function")
+        return e.displayName || e.name || null;
+      if (typeof e == "string")
+        return e;
+      switch (e) {
+        case c:
+          return "Fragment";
+        case y:
+          return "Portal";
+        case F:
+          return "Profiler";
+        case k:
+          return "StrictMode";
+        case E:
+          return "Suspense";
+        case p:
+          return "SuspenseList";
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case g:
+            var r = e;
+            return B(r) + ".Consumer";
+          case _:
+            var t = e;
+            return B(t._context) + ".Provider";
+          case f:
+            return N(e, e.render, "ForwardRef");
+          case m:
+            var n = e.displayName || null;
+            return n !== null ? n : j(e.type) || "Memo";
+          case R: {
+            var i = e, u = i._payload, o = i._init;
+            try {
+              return j(o(u));
+            } catch {
+              return null;
+            }
+          }
+        }
+      return null;
+    }
+    var M = Object.assign, z = 0, Z, Y, L, I, te, ne, q;
+    function J() {
+    }
+    J.__reactDisabledLog = !0;
+    function Le() {
+      {
+        if (z === 0) {
+          Z = console.log, Y = console.info, L = console.warn, I = console.error, te = console.group, ne = console.groupCollapsed, q = console.groupEnd;
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            value: J,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            info: e,
+            log: e,
+            warn: e,
+            error: e,
+            group: e,
+            groupCollapsed: e,
+            groupEnd: e
+          });
+        }
+        z++;
+      }
+    }
+    function Ke() {
+      {
+        if (z--, z === 0) {
+          var e = {
+            configurable: !0,
+            enumerable: !0,
+            writable: !0
+          };
+          Object.defineProperties(console, {
+            log: M({}, e, {
+              value: Z
+            }),
+            info: M({}, e, {
+              value: Y
+            }),
+            warn: M({}, e, {
+              value: L
+            }),
+            error: M({}, e, {
+              value: I
+            }),
+            group: M({}, e, {
+              value: te
+            }),
+            groupCollapsed: M({}, e, {
+              value: ne
+            }),
+            groupEnd: M({}, e, {
+              value: q
+            })
+          });
+        }
+        z < 0 && s("disabledDepth fell below zero. This is a bug in React. Please file an issue.");
+      }
+    }
+    var le = C.ReactCurrentDispatcher, ve;
+    function ae(e, r, t) {
+      {
+        if (ve === void 0)
+          try {
+            throw Error();
+          } catch (i) {
+            var n = i.stack.trim().match(/\n( *(at )?)/);
+            ve = n && n[1] || "";
+          }
+        return `
+` + ve + e;
+      }
+    }
+    var de = !1, oe;
+    {
+      var Be = typeof WeakMap == "function" ? WeakMap : Map;
+      oe = new Be();
+    }
+    function Ee(e, r) {
+      if (!e || de)
+        return "";
+      {
+        var t = oe.get(e);
+        if (t !== void 0)
+          return t;
+      }
+      var n;
+      de = !0;
+      var i = Error.prepareStackTrace;
+      Error.prepareStackTrace = void 0;
+      var u;
+      u = le.current, le.current = null, Le();
+      try {
+        if (r) {
+          var o = function() {
+            throw Error();
+          };
+          if (Object.defineProperty(o.prototype, "props", {
+            set: function() {
+              throw Error();
+            }
+          }), typeof Reflect == "object" && Reflect.construct) {
+            try {
+              Reflect.construct(o, []);
+            } catch (P) {
+              n = P;
+            }
+            Reflect.construct(e, [], o);
+          } else {
+            try {
+              o.call();
+            } catch (P) {
+              n = P;
+            }
+            e.call(o.prototype);
+          }
+        } else {
+          try {
+            throw Error();
+          } catch (P) {
+            n = P;
+          }
+          e();
+        }
+      } catch (P) {
+        if (P && n && typeof P.stack == "string") {
+          for (var a = P.stack.split(`
+`), O = n.stack.split(`
+`), d = a.length - 1, h = O.length - 1; d >= 1 && h >= 0 && a[d] !== O[h]; )
+            h--;
+          for (; d >= 1 && h >= 0; d--, h--)
+            if (a[d] !== O[h]) {
+              if (d !== 1 || h !== 1)
+                do
+                  if (d--, h--, h < 0 || a[d] !== O[h]) {
+                    var A = `
+` + a[d].replace(" at new ", " at ");
+                    return e.displayName && A.includes("<anonymous>") && (A = A.replace("<anonymous>", e.displayName)), typeof e == "function" && oe.set(e, A), A;
+                  }
+                while (d >= 1 && h >= 0);
+              break;
+            }
+        }
+      } finally {
+        de = !1, le.current = u, Ke(), Error.prepareStackTrace = i;
+      }
+      var X = e ? e.displayName || e.name : "", G = X ? ae(X) : "";
+      return typeof e == "function" && oe.set(e, G), G;
+    }
+    function qe(e, r, t) {
+      return Ee(e, !1);
+    }
+    function Ue(e) {
+      var r = e.prototype;
+      return !!(r && r.isReactComponent);
+    }
+    function ie(e, r, t) {
+      if (e == null)
+        return "";
+      if (typeof e == "function")
+        return Ee(e, Ue(e));
+      if (typeof e == "string")
+        return ae(e);
+      switch (e) {
+        case E:
+          return ae("Suspense");
+        case p:
+          return ae("SuspenseList");
+      }
+      if (typeof e == "object")
+        switch (e.$$typeof) {
+          case f:
+            return qe(e.render);
+          case m:
+            return ie(e.type, r, t);
+          case R: {
+            var n = e, i = n._payload, u = n._init;
+            try {
+              return ie(u(i), r, t);
+            } catch {
+            }
+          }
+        }
+      return "";
+    }
+    var Q = Object.prototype.hasOwnProperty, _e = {}, Re = C.ReactDebugCurrentFrame;
+    function se(e) {
+      if (e) {
+        var r = e._owner, t = ie(e.type, e._source, r ? r.type : null);
+        Re.setExtraStackFrame(t);
+      } else
+        Re.setExtraStackFrame(null);
+    }
+    function ze(e, r, t, n, i) {
+      {
+        var u = Function.call.bind(Q);
+        for (var o in e)
+          if (u(e, o)) {
+            var a = void 0;
+            try {
+              if (typeof e[o] != "function") {
+                var O = Error((n || "React class") + ": " + t + " type `" + o + "` is invalid; it must be a function, usually from the `prop-types` package, but received `" + typeof e[o] + "`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");
+                throw O.name = "Invariant Violation", O;
+              }
+              a = e[o](r, o, n, t, null, "SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED");
+            } catch (d) {
+              a = d;
+            }
+            a && !(a instanceof Error) && (se(i), s("%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).", n || "React class", t, o, typeof a), se(null)), a instanceof Error && !(a.message in _e) && (_e[a.message] = !0, se(i), s("Failed %s type: %s", t, a.message), se(null));
+          }
+      }
+    }
+    var Ge = Array.isArray;
+    function pe(e) {
+      return Ge(e);
+    }
+    function Je(e) {
+      {
+        var r = typeof Symbol == "function" && Symbol.toStringTag, t = r && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return t;
+      }
+    }
+    function Ve(e) {
+      try {
+        return Se(e), !1;
+      } catch {
+        return !0;
+      }
+    }
+    function Se(e) {
+      return "" + e;
+    }
+    function Ce(e) {
+      if (Ve(e))
+        return s("The provided key is an unsupported type %s. This value must be coerced to a string before before using it here.", Je(e)), Se(e);
+    }
+    var Te = C.ReactCurrentOwner, Xe = {
+      key: !0,
+      ref: !0,
+      __self: !0,
+      __source: !0
+    }, we, je;
+    function He(e) {
+      if (Q.call(e, "ref")) {
+        var r = Object.getOwnPropertyDescriptor(e, "ref").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return e.ref !== void 0;
+    }
+    function Ze(e) {
+      if (Q.call(e, "key")) {
+        var r = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (r && r.isReactWarning)
+          return !1;
+      }
+      return e.key !== void 0;
+    }
+    function Qe(e, r) {
+      typeof e.ref == "string" && Te.current;
+    }
+    function er(e, r) {
+      {
+        var t = function() {
+          we || (we = !0, s("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+        };
+        t.isReactWarning = !0, Object.defineProperty(e, "key", {
+          get: t,
+          configurable: !0
+        });
+      }
+    }
+    function rr(e, r) {
+      {
+        var t = function() {
+          je || (je = !0, s("%s: `ref` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://reactjs.org/link/special-props)", r));
+        };
+        t.isReactWarning = !0, Object.defineProperty(e, "ref", {
+          get: t,
+          configurable: !0
+        });
+      }
+    }
+    var tr = function(e, r, t, n, i, u, o) {
+      var a = {
+        // This tag allows us to uniquely identify this as a React Element
+        $$typeof: x,
+        // Built-in properties that belong on the element
+        type: e,
+        key: r,
+        ref: t,
+        props: o,
+        // Record the component responsible for creating this element.
+        _owner: u
+      };
+      return a._store = {}, Object.defineProperty(a._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: !1
+      }), Object.defineProperty(a, "_self", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: n
+      }), Object.defineProperty(a, "_source", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !1,
+        value: i
+      }), Object.freeze && (Object.freeze(a.props), Object.freeze(a)), a;
+    };
+    function nr(e, r, t, n, i) {
+      {
+        var u, o = {}, a = null, O = null;
+        t !== void 0 && (Ce(t), a = "" + t), Ze(r) && (Ce(r.key), a = "" + r.key), He(r) && (O = r.ref, Qe(r, i));
+        for (u in r)
+          Q.call(r, u) && !Xe.hasOwnProperty(u) && (o[u] = r[u]);
+        if (e && e.defaultProps) {
+          var d = e.defaultProps;
+          for (u in d)
+            o[u] === void 0 && (o[u] = d[u]);
+        }
+        if (a || O) {
+          var h = typeof e == "function" ? e.displayName || e.name || "Unknown" : e;
+          a && er(o, h), O && rr(o, h);
+        }
+        return tr(e, a, O, i, n, Te.current, o);
+      }
+    }
+    var me = C.ReactCurrentOwner, Oe = C.ReactDebugCurrentFrame;
+    function V(e) {
+      if (e) {
+        var r = e._owner, t = ie(e.type, e._source, r ? r.type : null);
+        Oe.setExtraStackFrame(t);
+      } else
+        Oe.setExtraStackFrame(null);
+    }
+    var be;
+    be = !1;
+    function he(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === x;
+    }
+    function Pe() {
+      {
+        if (me.current) {
+          var e = j(me.current.type);
+          if (e)
+            return `
+
+Check the render method of \`` + e + "`.";
+        }
+        return "";
+      }
+    }
+    function ar(e) {
+      return "";
+    }
+    var xe = {};
+    function or(e) {
+      {
+        var r = Pe();
+        if (!r) {
+          var t = typeof e == "string" ? e : e.displayName || e.name;
+          t && (r = `
+
+Check the top-level render call using <` + t + ">.");
+        }
+        return r;
+      }
+    }
+    function ke(e, r) {
+      {
+        if (!e._store || e._store.validated || e.key != null)
+          return;
+        e._store.validated = !0;
+        var t = or(r);
+        if (xe[t])
+          return;
+        xe[t] = !0;
+        var n = "";
+        e && e._owner && e._owner !== me.current && (n = " It was passed a child from " + j(e._owner.type) + "."), V(e), s('Each child in a list should have a unique "key" prop.%s%s See https://reactjs.org/link/warning-keys for more information.', t, n), V(null);
+      }
+    }
+    function Ae(e, r) {
+      {
+        if (typeof e != "object")
+          return;
+        if (pe(e))
+          for (var t = 0; t < e.length; t++) {
+            var n = e[t];
+            he(n) && ke(n, r);
+          }
+        else if (he(e))
+          e._store && (e._store.validated = !0);
+        else if (e) {
+          var i = v(e);
+          if (typeof i == "function" && i !== e.entries)
+            for (var u = i.call(e), o; !(o = u.next()).done; )
+              he(o.value) && ke(o.value, r);
+        }
+      }
+    }
+    function ir(e) {
+      {
+        var r = e.type;
+        if (r == null || typeof r == "string")
+          return;
+        var t;
+        if (typeof r == "function")
+          t = r.propTypes;
+        else if (typeof r == "object" && (r.$$typeof === f || // Note: Memo only checks outer props here.
+        // Inner props are checked in the reconciler.
+        r.$$typeof === m))
+          t = r.propTypes;
+        else
+          return;
+        if (t) {
+          var n = j(r);
+          ze(t, e.props, "prop", n, e);
+        } else if (r.PropTypes !== void 0 && !be) {
+          be = !0;
+          var i = j(r);
+          s("Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?", i || "Unknown");
+        }
+        typeof r.getDefaultProps == "function" && !r.getDefaultProps.isReactClassApproved && s("getDefaultProps is only used on classic React.createClass definitions. Use a static property named `defaultProps` instead.");
+      }
+    }
+    function sr(e) {
+      {
+        for (var r = Object.keys(e.props), t = 0; t < r.length; t++) {
+          var n = r[t];
+          if (n !== "children" && n !== "key") {
+            V(e), s("Invalid prop `%s` supplied to `React.Fragment`. React.Fragment can only have `key` and `children` props.", n), V(null);
+            break;
+          }
+        }
+        e.ref !== null && (V(e), s("Invalid attribute `ref` supplied to `React.Fragment`."), V(null));
+      }
+    }
+    var Fe = {};
+    function De(e, r, t, n, i, u) {
+      {
+        var o = $(e);
+        if (!o) {
+          var a = "";
+          (e === void 0 || typeof e == "object" && e !== null && Object.keys(e).length === 0) && (a += " You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.");
+          var O = ar();
+          O ? a += O : a += Pe();
+          var d;
+          e === null ? d = "null" : pe(e) ? d = "array" : e !== void 0 && e.$$typeof === x ? (d = "<" + (j(e.type) || "Unknown") + " />", a = " Did you accidentally export a JSX literal instead of a component?") : d = typeof e, s("React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s", d, a);
+        }
+        var h = nr(e, r, t, i, u);
+        if (h == null)
+          return h;
+        if (o) {
+          var A = r.children;
+          if (A !== void 0)
+            if (n)
+              if (pe(A)) {
+                for (var X = 0; X < A.length; X++)
+                  Ae(A[X], e);
+                Object.freeze && Object.freeze(A);
+              } else
+                s("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+            else
+              Ae(A, e);
+        }
+        if (Q.call(r, "key")) {
+          var G = j(e), P = Object.keys(r).filter(function(dr) {
+            return dr !== "key";
+          }), ye = P.length > 0 ? "{key: someKey, " + P.join(": ..., ") + ": ...}" : "{key: someKey}";
+          if (!Fe[G + ye]) {
+            var vr = P.length > 0 ? "{" + P.join(": ..., ") + ": ...}" : "{}";
+            s(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`, ye, G, vr, G), Fe[G + ye] = !0;
+          }
+        }
+        return e === c ? sr(h) : ir(h), h;
+      }
+    }
+    function ur(e, r, t) {
+      return De(e, r, t, !0);
+    }
+    function cr(e, r, t) {
+      return De(e, r, t, !1);
+    }
+    var fr = cr, lr = ur;
+    re.Fragment = c, re.jsx = fr, re.jsxs = lr;
+  }()), re;
+}
+process.env.NODE_ENV === "production" ? ge.exports = Tr() : ge.exports = wr();
+var K = ge.exports;
+const jr = ({
+  points: T,
+  degree: x = 3,
+  weights: y,
+  knots: c,
+  curveResolution: k = 50,
+  color: F = "black",
+  segments: _,
+  dashed: g = !1,
+  vertexColors: f,
+  ...E
+}) => {
+  const p = Me(() => {
+    if (!c)
+      return console.error("NurbsCurve requires knots to be provided"), [];
+    try {
+      const m = Array(T.length).fill(1), R = ue.geom.NurbsCurve.byKnotsControlPointsWeights(
+        x,
+        c,
+        T,
+        y ?? m
+      );
+      return Array.from({ length: k + 1 }, (D, S) => {
+        const b = S / k, v = R.point(b);
+        return new hr(v[0], v[1], v[2]);
+      });
+    } catch (m) {
+      return console.error("Error creating NURBS curve:", m), [];
+    }
+  }, [T, x, y, c, k]);
+  return p.length === 0 ? null : /* @__PURE__ */ K.jsx(
+    Sr,
+    {
+      points: p,
+      color: F,
+      segments: _,
+      dashed: g,
+      vertexColors: f,
+      ...E
+    }
+  );
+};
+function Fr({
+  controlPoints: T,
+  weights: x,
+  degreeU: y,
+  degreeV: c,
+  color: k = "#ffffff",
+  wireframe: F = !1,
+  children: _,
+  ...g
+}) {
+  const { scene: f } = Cr(), [E, p] = pr(null);
+  return mr(() => {
+    const m = T.length + y + 1, R = T[0].length + c + 1, D = Array(m).fill(0).map((w, l) => l < y + 1 ? 0 : l >= m - y - 1 ? 1 : (l - y) / (m - 2 * y - 1)), S = Array(R).fill(0).map((w, l) => l < c + 1 ? 0 : l >= R - c - 1 ? 1 : (l - c) / (R - 2 * c - 1)), b = ue.geom.NurbsSurface.byKnotsControlPointsWeights(
+      y,
+      c,
+      D,
+      S,
+      T,
+      x
+    ), v = new yr(), C = [], s = [], W = [], H = 20, U = 20, ce = 1 / H, fe = 1 / U;
+    for (let w = 0; w <= H; w++)
+      for (let l = 0; l <= U; l++) {
+        const $ = w * ce, N = l * fe, B = b.point($, N), j = 1e-4, M = b.point($ + j, N), z = b.point($, N + j), Z = b.point($, N), Y = M.map((q, J) => (q - Z[J]) / j), L = z.map((q, J) => (q - Z[J]) / j), I = [
+          Y[1] * L[2] - Y[2] * L[1],
+          Y[2] * L[0] - Y[0] * L[2],
+          Y[0] * L[1] - Y[1] * L[0]
+        ], te = Math.sqrt(
+          I[0] * I[0] + I[1] * I[1] + I[2] * I[2]
+        ), ne = I.map((q) => q / te);
+        C.push(...B), s.push(...ne);
+      }
+    for (let w = 0; w < H; w++)
+      for (let l = 0; l < U; l++) {
+        const $ = w * (U + 1) + l, N = $ + 1, B = (w + 1) * (U + 1) + l, j = B + 1;
+        W.push($, N, B), W.push(N, j, B);
+      }
+    if (v.setAttribute("position", new Ie(C, 3)), v.setAttribute("normal", new Ie(s, 3)), v.setIndex(W), p(v), !_) {
+      const w = new gr({
+        color: new _r(k),
+        side: Er,
+        wireframe: F
+      }), l = new Rr(v, w);
+      return f.add(l), () => {
+        f.remove(l), v.dispose(), w.dispose();
+      };
+    }
+    return () => {
+      v.dispose();
+    };
+  }, [
+    T,
+    x,
+    y,
+    c,
+    k,
+    F,
+    f,
+    _
+  ]), E && _ ? !Ye(_) || !_.type.toString().includes("Material") ? (console.warn("NurbsSurface children must be a material component"), null) : /* @__PURE__ */ K.jsxs("mesh", { ...g, children: [
+    /* @__PURE__ */ K.jsx("primitive", { object: E, attach: "geometry" }),
+    _
+  ] }) : null;
+}
+const Dr = ({
+  degreeV: T = 3,
+  knotsV: x,
+  resolutionU: y = 20,
+  resolutionV: c = 20,
+  color: k = "#ff0000",
+  wireframe: F = !1,
+  children: _
+}) => {
+  const g = Me(() => {
+    const f = br.toArray(_).filter(
+      (E) => Ye(E) && E.type === jr
+    );
+    if (f.length < 2)
+      return console.error("LoftedSurface requires at least 2 NurbsCurve children"), null;
+    try {
+      const E = f.map((S) => {
+        const { points: b, degree: v = 3, weights: C, knots: s } = S.props, W = Array(b.length).fill(1);
+        return ue.geom.NurbsCurve.byKnotsControlPointsWeights(
+          v,
+          s,
+          b,
+          C ?? W
+        );
+      }), p = ue.geom.NurbsSurface.byLoftingCurves(
+        E,
+        T
+      ), m = [], R = [], D = [];
+      for (let S = 0; S <= y; S++)
+        for (let b = 0; b <= c; b++) {
+          const v = S / y, C = b / c, s = p.point(v, C);
+          m.push(s[0], s[1], s[2]), D.push(v, C);
+        }
+      for (let S = 0; S < y; S++)
+        for (let b = 0; b < c; b++) {
+          const v = S * (c + 1) + b, C = v + 1, s = (S + 1) * (c + 1) + b, W = s + 1;
+          R.push(v, C, s), R.push(C, W, s);
+        }
+      return {
+        vertices: m,
+        indices: R,
+        uvs: D
+      };
+    } catch (E) {
+      return console.error("Error creating lofted surface:", E), null;
+    }
+  }, [_, T, x, y, c]);
+  return g ? /* @__PURE__ */ K.jsxs("mesh", { children: [
+    /* @__PURE__ */ K.jsxs("bufferGeometry", { children: [
+      /* @__PURE__ */ K.jsx(
+        "bufferAttribute",
+        {
+          attach: "attributes-position",
+          count: g.vertices.length / 3,
+          array: new Float32Array(g.vertices),
+          itemSize: 3
+        }
+      ),
+      /* @__PURE__ */ K.jsx(
+        "bufferAttribute",
+        {
+          attach: "attributes-uv",
+          count: g.uvs.length / 2,
+          array: new Float32Array(g.uvs),
+          itemSize: 2
+        }
+      ),
+      /* @__PURE__ */ K.jsx(
+        "bufferAttribute",
+        {
+          attach: "index",
+          count: g.indices.length,
+          array: new Uint32Array(g.indices),
+          itemSize: 1
+        }
+      )
+    ] }),
+    /* @__PURE__ */ K.jsx("meshStandardMaterial", { color: k, wireframe: F })
+  ] }) : null;
+};
+export {
+  Dr as LoftedSurface,
+  jr as NurbsCurve,
+  Fr as NurbsSurface
+};

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "react-three-nurbs",
+  "private": false,
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "author": "Tommaso Turchi",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "storybook": "npx storybook dev -p 6006",
+    "build-storybook": "npx storybook build",
+    "prepublishOnly": "npm run build",
+    "preversion": "npm run lint"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/tommasoturchi/react-three-nurbs.git"
+  },
+  "keywords": [
+    "react",
+    "three.js",
+    "react-three-fiber",
+    "nurbs",
+    "curves",
+    "surfaces",
+    "3d"
+  ],
+  "bugs": {
+    "url": "https://github.com/tommasoturchi/react-three-nurbs/issues"
+  },
+  "homepage": "https://react-three-nurbs.trx.li/",
+  "dependencies": {
+    "@react-three/drei": "^9.99.0",
+    "@react-three/fiber": "^8.15.16",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "three": "^0.161.0",
+    "verb": "^0.8.10",
+    "verb-nurbs": "^3.0.3"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^8.6.12",
+    "@storybook/addon-interactions": "^8.6.12",
+    "@storybook/addon-links": "^8.6.12",
+    "@storybook/blocks": "^8.6.12",
+    "@storybook/builder-vite": "^8.6.12",
+    "@storybook/react": "^8.6.12",
+    "@storybook/react-vite": "^8.6.12",
+    "@types/node": "^22.15.17",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@types/three": "^0.161.2",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.56.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}