react-three-nurbs 0.2.0 → 0.3.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 (3) hide show
  1. package/README.md +68 -0
  2. package/dist/index.js +2988 -562
  3. package/package.json +17 -15
package/README.md CHANGED
@@ -2,10 +2,15 @@
2
2
 
3
3
  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.
4
4
 
5
+ [![Buy Me A Coffee](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/tommasoturchi)
6
+
5
7
  ## Features
6
8
 
7
9
  - 🎯 Simple React component API for NURBS surfaces
8
10
  - 📐 Support for arbitrary degree NURBS surfaces
11
+ - ✂️ Trimmed surfaces with multiple trimming curves
12
+ - 🔄 Revolved surfaces with custom axes
13
+ - 📈 Lofted surfaces from multiple curves
9
14
  - 🎨 Customizable surface appearance with R3F materials
10
15
  - 🔄 Automatic normal calculation for proper lighting
11
16
  - 🎮 Interactive 3D visualization with React Three Fiber
@@ -133,6 +138,57 @@ function App() {
133
138
  }
134
139
  ```
135
140
 
141
+ ### Trimmed Surface
142
+
143
+ ```tsx
144
+ import { TrimmedSurface, NurbsSurface, NurbsCurve } from 'react-three-nurbs'
145
+ import { Canvas } from '@react-three/fiber'
146
+ import { DoubleSide } from 'three'
147
+
148
+ function App() {
149
+ // Define control points for the base surface
150
+ const controlPoints = [
151
+ [[0, 0, 0], [1, 0, 0], [2, 0, 0]],
152
+ [[0, 1, 0], [1, 1, 1], [2, 1, 0]],
153
+ [[0, 2, 0], [1, 2, 0], [2, 2, 0]]
154
+ ]
155
+ const weights = [[1, 1, 1], [1, 1, 1], [1, 1, 1]]
156
+
157
+ // Define trimming curve in UV space
158
+ const trimPoints = [
159
+ [0.2, 0.2],
160
+ [0.8, 0.2],
161
+ [0.8, 0.8],
162
+ [0.2, 0.8]
163
+ ]
164
+ const knots = [0, 0, 0, 0, 1, 1, 1, 1]
165
+
166
+ return (
167
+ <Canvas>
168
+ <ambientLight intensity={0.5} />
169
+ <pointLight position={[10, 10, 10]} />
170
+ <TrimmedSurface>
171
+ <NurbsSurface
172
+ controlPoints={controlPoints}
173
+ weights={weights}
174
+ degreeU={2}
175
+ degreeV={2}
176
+ />
177
+ <NurbsCurve
178
+ points={trimPoints}
179
+ knots={knots}
180
+ degree={3}
181
+ />
182
+ <meshPhongMaterial
183
+ color="#ff0000"
184
+ side={DoubleSide}
185
+ />
186
+ </TrimmedSurface>
187
+ </Canvas>
188
+ )
189
+ }
190
+ ```
191
+
136
192
  ## Props
137
193
 
138
194
  ### NurbsSurface Props
@@ -163,6 +219,18 @@ function App() {
163
219
  | `vertexColors` | `number[][]` | No | - | RGB colors for each vertex |
164
220
  | `...lineProps` | `LineProps` | No | - | All drei Line component props are supported |
165
221
 
222
+ ### TrimmedSurface Props
223
+
224
+ | Prop | Type | Required | Default | Description |
225
+ |------|------|----------|---------|-------------|
226
+ | `children` | `ReactElement[]` | Yes | - | Must contain exactly one `NurbsSurface`, one or more `NurbsCurve` components for trimming, and one material component |
227
+ | `...meshProps` | `MeshProps` | No | - | All React Three Fiber mesh props are supported |
228
+
229
+ The `TrimmedSurface` component requires its children to be in this specific order:
230
+ 1. A `NurbsSurface` component defining the base surface
231
+ 2. One or more `NurbsCurve` components defining the trimming curves (in UV space)
232
+ 3. A material component (e.g., `meshStandardMaterial`, `meshPhongMaterial`)
233
+
166
234
  ## Development
167
235
 
168
236
  This project is built with: