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
• Usage
• Common Props
• Components
  • Basic Shapes
  • Boolean Operations
  • Transformations
  • Extrusions
• Example Wrapper
• Why?
• Contributing

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.