Detalhes do pacote

jscad-fiber

tscircuit27.5k0.0.79

readme (leia-me)

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:

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?

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.