@tscircuit/3d-viewer 0.0.627 → 0.0.629
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.
- package/README.md +32 -11
- package/dist/index.d.ts +4 -0
- package/dist/index.js +1609 -1027
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -82,7 +82,7 @@ viewer. The host can switch tabs and focus the schematic using the source ID.
|
|
|
82
82
|
Omit the callback when schematic navigation is unavailable.
|
|
83
83
|
|
|
84
84
|
```tsx
|
|
85
|
-
|
|
85
|
+
;<CadViewer
|
|
86
86
|
circuitJson={circuitJson}
|
|
87
87
|
onViewSchematicComponent={({ source_component_id }) => {
|
|
88
88
|
// Find the schematic component with this source ID and focus it.
|
|
@@ -96,9 +96,9 @@ Omit the callback when schematic navigation is unavailable.
|
|
|
96
96
|
When using the SVG converter in Node.js environments, you'll need to provide JSDOM:
|
|
97
97
|
|
|
98
98
|
```typescript
|
|
99
|
-
import { JSDOM } from
|
|
100
|
-
import { convert3dCircuitToSvg } from
|
|
101
|
-
import { applyJsdomShim } from
|
|
99
|
+
import { JSDOM } from "jsdom"
|
|
100
|
+
import { convert3dCircuitToSvg } from "@tscircuit/3d-viewer/3d"
|
|
101
|
+
import { applyJsdomShim } from "@tscircuit/3d-viewer/utils"
|
|
102
102
|
|
|
103
103
|
// Setup JSDOM environment
|
|
104
104
|
const dom = new JSDOM()
|
|
@@ -113,8 +113,8 @@ const options = {
|
|
|
113
113
|
zoom: 50,
|
|
114
114
|
camera: {
|
|
115
115
|
position: { x: 0, y: 0, z: 100 },
|
|
116
|
-
lookAt: { x: 0, y: 0, z: 0 }
|
|
117
|
-
}
|
|
116
|
+
lookAt: { x: 0, y: 0, z: 0 },
|
|
117
|
+
},
|
|
118
118
|
}
|
|
119
119
|
|
|
120
120
|
const svgString = await convert3dCircuitToSvg(circuitJson, options)
|
|
@@ -137,7 +137,6 @@ The `convert3dCircuitToSvg` function accepts the following options:
|
|
|
137
137
|
Main component for rendering the 3D PCB viewer.
|
|
138
138
|
|
|
139
139
|
Props:
|
|
140
|
-
|
|
141
140
|
- `circuit-json`: (optional) An array of AnyCircuitElement objects representing the PCB layout.
|
|
142
141
|
- `children`: (optional) React children elements describing the PCB layout (alternative to using `circuit-json`).
|
|
143
142
|
- `resolveStaticAsset`: (optional) Function that receives each component model URL (`obj`, `wrl`, `stl`, `gltf`, `glb`, `step`) and returns the resolved URL to load.
|
|
@@ -147,14 +146,12 @@ Props:
|
|
|
147
146
|
Defines the PCB board dimensions.
|
|
148
147
|
|
|
149
148
|
Props:
|
|
150
|
-
|
|
151
149
|
- `width`: Width of the board (e.g., "20mm").
|
|
152
150
|
- `height`: Height of the board (e.g., "20mm").
|
|
153
151
|
|
|
154
152
|
### Component Elements
|
|
155
153
|
|
|
156
154
|
Various component elements can be used as children of the `<board>` element:
|
|
157
|
-
|
|
158
155
|
- `<resistor>`
|
|
159
156
|
- `<capacitor>`
|
|
160
157
|
- `<chip>`
|
|
@@ -269,7 +266,7 @@ input remains a distinct diagnostic, not the mounted pose's zero-angle control.
|
|
|
269
266
|
You can define custom 3D models for components using the `cadModel` prop:
|
|
270
267
|
|
|
271
268
|
```jsx
|
|
272
|
-
|
|
269
|
+
;<chip
|
|
273
270
|
name="U1"
|
|
274
271
|
footprint="soic8"
|
|
275
272
|
cadModel={{
|
|
@@ -284,7 +281,7 @@ You can define custom 3D models for components using the `cadModel` prop:
|
|
|
284
281
|
For more complex or programmatically defined models, you can use JSCAD:
|
|
285
282
|
|
|
286
283
|
```jsx
|
|
287
|
-
|
|
284
|
+
;<bug
|
|
288
285
|
footprint="soic8"
|
|
289
286
|
name="U1"
|
|
290
287
|
cadModel={{
|
|
@@ -308,3 +305,27 @@ We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) f
|
|
|
308
305
|
## License
|
|
309
306
|
|
|
310
307
|
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
|
|
308
|
+
|
|
309
|
+
### Pre-rendered GLB scenes
|
|
310
|
+
|
|
311
|
+
To open a self-contained GLB produced by `circuit-json-to-gltf` without rebuilding
|
|
312
|
+
board geometry or fetching component models:
|
|
313
|
+
|
|
314
|
+
```tsx
|
|
315
|
+
<CadViewer glbUrl="/previews/board.glb" />
|
|
316
|
+
// Or use bytes already available in memory:
|
|
317
|
+
<CadViewer glbData={arrayBuffer} />
|
|
318
|
+
```
|
|
319
|
+
|
|
320
|
+
Supply one GLB source. It takes precedence over `circuitJson` and JSX children.
|
|
321
|
+
The viewer restores the exporter's coordinate frame (+Y up, mm) to the normal
|
|
322
|
+
viewer frame (+Z up, mm), fits the camera, and retains orbit controls and camera
|
|
323
|
+
presets. Failed loads display an error; replacing a source cancels the previous
|
|
324
|
+
load and disposes its geometry, materials, and textures.
|
|
325
|
+
|
|
326
|
+
New exports carry lightweight identity in each component node's
|
|
327
|
+
`extras.tscircuit`: `componentName`, `cad_component_id`, `source_component_id`,
|
|
328
|
+
and `pcb_component_id` (when available). These support name tooltips, hiding
|
|
329
|
+
individual components, and `onViewSchematicComponent` without supplying Circuit
|
|
330
|
+
JSON. Existing GLBs without metadata still render. Board layers, folding, and
|
|
331
|
+
model appearance are baked into the GLB; regenerate it to change them.
|
package/dist/index.d.ts
CHANGED
|
@@ -49,6 +49,10 @@ declare const CadViewerJscad: React$1.ForwardRefExoticComponent<Props & {
|
|
|
49
49
|
|
|
50
50
|
type CadViewerProps = Omit<React.ComponentProps<typeof CadViewerJscad>, "circuitJson" | "hiddenCadComponentIds"> & {
|
|
51
51
|
circuitJson?: any[];
|
|
52
|
+
/** Pre-rendered circuit-json-to-gltf GLB URL. Bypasses geometry/model generation. */
|
|
53
|
+
glbUrl?: string;
|
|
54
|
+
/** In-memory alternative to glbUrl. Supply only one GLB source. */
|
|
55
|
+
glbData?: ArrayBuffer;
|
|
52
56
|
foldPcbs?: boolean;
|
|
53
57
|
/** Enable right-click navigation using the same identity as the PCB viewer. */
|
|
54
58
|
onViewSchematicComponent?: (event: ViewSchematicComponentEvent) => void;
|