0.0.77 • Published 6 months ago

jscad-fiber v0.0.77

Weekly downloads
-
License
-
Repository
github
Last release
6 months ago

jscad-fiber

View examples · jscad · tscircuit · jscad-electronics

This package allows you to create 3D CAD objects with React and JSCAD.

Table of Contents

Example CAD Model

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:

PropTypeDescription
colorstring \| [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

PropTypeDescription
sizenumber \| [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

PropTypeDescription
radiusnumberSphere radius
segmentsnumberOptional detail level (default: 32)
<Sphere radius={10} segments={32} />

Cylinder

PropTypeDescription
radiusnumberCylinder radius
heightnumberCylinder height
<Cylinder radius={5} height={10} />

Torus

PropTypeDescription
innerRadiusnumberInner ring radius
outerRadiusnumberOuter ring radius
innerSegmentsnumberOptional inner detail level (default: 32)
outerSegmentsnumberOptional outer detail level (default: 32)
<Torus 
  innerRadius={10}
  outerRadius={15}
  innerSegments={32}
  outerSegments={32}
/>

Boolean Operations

Subtract

PropTypeDescription
childrenReact.ReactNode[]First child is base shape, others are subtracted
<Subtract>
  <Cube size={10} /> {/* Base shape */}
  <Sphere radius={6} /> {/* Subtracted from base */}
</Subtract>

Union

PropTypeDescription
childrenReact.ReactNode[]Shapes to combine
<Union>
  <Cube size={10} />
  <Sphere radius={6} center={[0,0,10]} />
</Union>

Hull

PropTypeDescription
childrenReact.ReactNode[]Shapes to create hull from
<Hull>
  <Cube size={10} />
  <Sphere radius={6} center={[0,0,10]} />
</Hull>

Transformations

Translate

PropTypeDescription
offset[number,number,number]Translation in x,y,z
<Translate offset={[x,y,z]}>
  <Cube size={10} />
</Translate>

Rotate

PropTypeDescription
angles[number,number,number]Rotation angles in radians x,y,z
<Rotate angles={[x,y,z]}>
  <Cube size={10} />
</Rotate>

Extrusions

ExtrudeLinear

PropTypeDescription
heightnumberExtrusion height
twistAnglenumberOptional twist during extrusion
<ExtrudeLinear height={10}>
  <Polygon points={[[0,0], [10,0], [5,10]]} />
</ExtrudeLinear>

ExtrudeRotate

PropTypeDescription
anglenumberRotation angle in radians
segmentsnumberOptional number of segments
<ExtrudeRotate angle={Math.PI * 2}>
  <Polygon points={[[0,0], [10,0], [5,10]]} />
</ExtrudeRotate>

Component Props Reference

ComponentPropsDescription
Cubesize: number \| [number,number,number]Size in each dimension
Sphereradius: number, segments?: numberRadius and detail level
Cylinderradius: number, height: numberBasic cylinder dimensions
TorusinnerRadius: number, outerRadius: number, segments?: numberRing dimensions
ExtrudeLinearheight: number, twistAngle?: numberLinear extrusion with optional twist
ExtrudeRotateangle: number, segments?: numberRotational sweep
Polygonpoints: [number,number][]2D points array
Translateoffset: [number,number,number]3D translation
Rotateangles: [number,number,number]Rotation angles in radians
Hullchildren: React.ReactNodeConvex hull of children
Unionchildren: React.ReactNodeBoolean union of children
Subtractchildren: React.ReactNodeBoolean subtraction

Why?

Example Circuit

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: ExampleWrapper

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.

0.0.73

8 months ago

0.0.74

7 months ago

0.0.75

7 months ago

0.0.76

7 months ago

0.0.77

6 months ago

0.0.70

9 months ago

0.0.71

9 months ago

0.0.69

9 months ago

0.0.62

10 months ago

0.0.63

10 months ago

0.0.64

10 months ago

0.0.65

10 months ago

0.0.66

10 months ago

0.0.67

10 months ago

0.0.68

9 months ago

0.0.60

11 months ago

0.0.61

11 months ago

0.0.59

11 months ago

0.0.58

11 months ago

0.0.57

11 months ago

0.0.56

11 months ago

0.0.55

11 months ago

0.0.54

11 months ago

0.0.53

11 months ago

0.0.52

11 months ago

0.0.51

11 months ago

0.0.50

11 months ago

0.0.49

11 months ago

0.0.48

11 months ago

0.0.47

11 months ago

0.0.46

11 months ago

0.0.45

12 months ago

0.0.44

12 months ago

0.0.43

12 months ago

0.0.42

12 months ago

0.0.41

12 months ago

0.0.40

12 months ago

0.0.39

12 months ago

0.0.38

12 months ago

0.0.37

12 months ago

0.0.36

12 months ago

0.0.35

12 months ago

0.0.34

12 months ago

0.0.33

12 months ago

0.0.32

12 months ago

0.0.31

12 months ago

0.0.30

12 months ago

0.0.29

12 months ago

0.0.28

12 months ago

0.0.27

12 months ago

0.0.26

12 months ago

0.0.25

12 months ago

0.0.22

12 months ago

0.0.21

12 months ago

0.0.17

12 months ago

0.0.15

12 months ago

0.0.13

12 months ago

0.0.11

12 months ago

0.0.9

1 year ago

0.0.8

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago

0.0.3

1 year ago

0.0.2

1 year ago

0.0.1

1 year ago