jscad-fiber v0.0.77
jscad-fiber
View examples · jscad · tscircuit · jscad-electronics
This package allows you to create 3D CAD objects with React and JSCAD.
Table of Contents
Installation
npm install jscad-fiber @jscad/modeling three @react-three/fiber
Usage
Create JSCAD components with React:
import { JsCadView } from "jscad-fiber"
import { Cube, Sphere, Subtract } from "jscad-fiber"
export default () => (
<JsCadView>
<Subtract>
<Cube size={10} />
<Sphere radius={6.8} />
</Subtract>
</JsCadView>
)
Common Props
All components support these common props:
Prop | Type | Description |
---|---|---|
color | string \| [number,number,number] | CSS color string or RGB array |
center | [number,number,number] \| {x,y,z} | Position in 3D space |
offset | [number,number,number] \| {x,y,z} | Alternative to center |
Components
Basic Shapes
Cube
Prop | Type | Description |
---|---|---|
size | number \| [number,number,number] | Single number for all dimensions or width, height, depth |
<Cube size={10} /> // Single number for all dimensions
<Cube size={[width, height, depth]} /> // Array for different dimensions
Sphere
Prop | Type | Description |
---|---|---|
radius | number | Sphere radius |
segments | number | Optional detail level (default: 32) |
<Sphere radius={10} segments={32} />
Cylinder
Prop | Type | Description |
---|---|---|
radius | number | Cylinder radius |
height | number | Cylinder height |
<Cylinder radius={5} height={10} />
Torus
Prop | Type | Description |
---|---|---|
innerRadius | number | Inner ring radius |
outerRadius | number | Outer ring radius |
innerSegments | number | Optional inner detail level (default: 32) |
outerSegments | number | Optional outer detail level (default: 32) |
<Torus
innerRadius={10}
outerRadius={15}
innerSegments={32}
outerSegments={32}
/>
Boolean Operations
Subtract
Prop | Type | Description |
---|---|---|
children | React.ReactNode[] | First child is base shape, others are subtracted |
<Subtract>
<Cube size={10} /> {/* Base shape */}
<Sphere radius={6} /> {/* Subtracted from base */}
</Subtract>
Union
Prop | Type | Description |
---|---|---|
children | React.ReactNode[] | Shapes to combine |
<Union>
<Cube size={10} />
<Sphere radius={6} center={[0,0,10]} />
</Union>
Hull
Prop | Type | Description |
---|---|---|
children | React.ReactNode[] | Shapes to create hull from |
<Hull>
<Cube size={10} />
<Sphere radius={6} center={[0,0,10]} />
</Hull>
Transformations
Translate
Prop | Type | Description |
---|---|---|
offset | [number,number,number] | Translation in x,y,z |
<Translate offset={[x,y,z]}>
<Cube size={10} />
</Translate>
Rotate
Prop | Type | Description |
---|---|---|
angles | [number,number,number] | Rotation angles in radians x,y,z |
<Rotate angles={[x,y,z]}>
<Cube size={10} />
</Rotate>
Extrusions
ExtrudeLinear
Prop | Type | Description |
---|---|---|
height | number | Extrusion height |
twistAngle | number | Optional twist during extrusion |
<ExtrudeLinear height={10}>
<Polygon points={[[0,0], [10,0], [5,10]]} />
</ExtrudeLinear>
ExtrudeRotate
Prop | Type | Description |
---|---|---|
angle | number | Rotation angle in radians |
segments | number | Optional number of segments |
<ExtrudeRotate angle={Math.PI * 2}>
<Polygon points={[[0,0], [10,0], [5,10]]} />
</ExtrudeRotate>
Component Props Reference
Component | Props | Description |
---|---|---|
Cube | size: number \| [number,number,number] | Size in each dimension |
Sphere | radius: number , segments?: number | Radius and detail level |
Cylinder | radius: number , height: number | Basic cylinder dimensions |
Torus | innerRadius: number , outerRadius: number , segments?: number | Ring dimensions |
ExtrudeLinear | height: number , twistAngle?: number | Linear extrusion with optional twist |
ExtrudeRotate | angle: number , segments?: number | Rotational sweep |
Polygon | points: [number,number][] | 2D points array |
Translate | offset: [number,number,number] | 3D translation |
Rotate | angles: [number,number,number] | Rotation angles in radians |
Hull | children: React.ReactNode | Convex hull of children |
Union | children: React.ReactNode | Boolean union of children |
Subtract | children: React.ReactNode | Boolean subtraction |
Why?
JSCAD allows you to create detailed 3D objects using boolean operations. This is how modern CAD tools create precise 3D models. jscad-fiber is used to create the 3D electronics library for tscircuit called jscad-electronics
Example Wrapper
The library includes an ExampleWrapper
component that provides a convenient way to display both the rendered 3D object and its source code:
import { ExampleWrapper } from "jscad-fiber"
export default () => (
<ExampleWrapper fileName={import.meta.url}>
<JsCadView>
<Sphere radius={10} color="orange" />
</JsCadView>
</ExampleWrapper>
)
This wrapper:
- Shows the rendered 3D object
- Provides a "Show Code" button that reveals the source code
- Automatically syntax highlights the code
- Makes examples more interactive and educational
Contributing
See the examples
directory for more usage examples.
Pull requests welcome! Please check existing issues or create a new one to discuss major changes.
8 months ago
7 months ago
7 months ago
7 months ago
6 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago