{"id":23167548,"url":"https://github.com/tscircuit/jscad-fiber","last_synced_at":"2025-04-06T02:07:17.316Z","repository":{"id":247021778,"uuid":"824288811","full_name":"tscircuit/jscad-fiber","owner":"tscircuit","description":"Create 3d CAD models with React using jscad","archived":false,"fork":false,"pushed_at":"2025-03-29T16:56:05.000Z","size":1888,"stargazers_count":35,"open_issues_count":18,"forks_count":15,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-30T01:12:19.760Z","etag":null,"topics":["3d","cad","hacktoberfest","react"],"latest_commit_sha":null,"homepage":"https://tscircuit.github.io/jscad-fiber/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tscircuit.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-07-04T19:22:56.000Z","updated_at":"2025-03-29T16:56:09.000Z","dependencies_parsed_at":"2024-08-07T10:24:18.274Z","dependency_job_id":"161ac177-ffd7-438f-885a-306b2ad0d75a","html_url":"https://github.com/tscircuit/jscad-fiber","commit_stats":null,"previous_names":["tscircuit/jscad-fiber"],"tags_count":62,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tscircuit%2Fjscad-fiber","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tscircuit%2Fjscad-fiber/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tscircuit%2Fjscad-fiber/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tscircuit%2Fjscad-fiber/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tscircuit","download_url":"https://codeload.github.com/tscircuit/jscad-fiber/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423512,"owners_count":20936626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","cad","hacktoberfest","react"],"created_at":"2024-12-18T02:29:20.986Z","updated_at":"2025-04-06T02:07:17.299Z","avatar_url":"https://github.com/tscircuit.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# jscad-fiber\n\n[View examples](https://tscircuit.github.io/jscad-fiber/) \u0026middot; [jscad](https://github.com/jscad/OpenJSCAD.org) \u0026middot; [tscircuit](https://github.com/tscircuit/tscircuit) \u0026middot; [jscad-electronics](https://github.com/tscircuit/jscad-electronics)\n\nThis package allows you to create 3D CAD objects with React and JSCAD.\n\n## Table of Contents\n- [Installation](#installation)\n- [Usage](#usage)\n- [Common Props](#common-props)\n- [Components](#components)\n  - [Basic Shapes](#basic-shapes)\n  - [Boolean Operations](#boolean-operations)\n  - [Transformations](#transformations)\n  - [Extrusions](#extrusions)\n- [Example Wrapper](#example-wrapper)\n- [Why?](#why)\n- [Contributing](#contributing)\n\n![Example CAD Model](https://github.com/user-attachments/assets/a17e5e04-ba88-4b9b-9308-58121779463e)\n\n\n\n## Installation\n\n```bash\nnpm install jscad-fiber @jscad/modeling three @react-three/fiber\n```\n\n## Usage\n\nCreate JSCAD components with React:\n\n```tsx\nimport { JsCadView } from \"jscad-fiber\"\nimport { Cube, Sphere, Subtract } from \"jscad-fiber\"\n\nexport default () =\u003e (\n  \u003cJsCadView\u003e\n    \u003cSubtract\u003e\n      \u003cCube size={10} /\u003e\n      \u003cSphere radius={6.8} /\u003e\n    \u003c/Subtract\u003e\n  \u003c/JsCadView\u003e\n)\n```\n\n## Common Props\n\nAll components support these common props:\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `color` | `string \\| [number,number,number]` | CSS color string or RGB array |\n| `center` | `[number,number,number] \\| {x,y,z}` | Position in 3D space |\n| `offset` | `[number,number,number] \\| {x,y,z}` | Alternative to center |\n\n## Components\n\n### Basic Shapes\n\n#### Cube\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `size` | `number \\| [number,number,number]` | Single number for all dimensions or [width, height, depth] |\n\n```tsx\n\u003cCube size={10} /\u003e // Single number for all dimensions\n\u003cCube size={[width, height, depth]} /\u003e // Array for different dimensions\n```\n\n#### Sphere\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `radius` | `number` | Sphere radius |\n| `segments` | `number` | Optional detail level (default: 32) |\n\n```tsx\n\u003cSphere radius={10} segments={32} /\u003e\n```\n\n#### Cylinder\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `radius` | `number` | Cylinder radius |\n| `height` | `number` | Cylinder height |\n\n```tsx\n\u003cCylinder radius={5} height={10} /\u003e\n```\n\n#### Torus\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `innerRadius` | `number` | Inner ring radius |\n| `outerRadius` | `number` | Outer ring radius |\n| `innerSegments` | `number` | Optional inner detail level (default: 32) |\n| `outerSegments` | `number` | Optional outer detail level (default: 32) |\n\n```tsx\n\u003cTorus \n  innerRadius={10}\n  outerRadius={15}\n  innerSegments={32}\n  outerSegments={32}\n/\u003e\n```\n\n### Boolean Operations\n\n#### Subtract\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `children` | `React.ReactNode[]` | First child is base shape, others are subtracted |\n\n```tsx\n\u003cSubtract\u003e\n  \u003cCube size={10} /\u003e {/* Base shape */}\n  \u003cSphere radius={6} /\u003e {/* Subtracted from base */}\n\u003c/Subtract\u003e\n```\n\n#### Union\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `children` | `React.ReactNode[]` | Shapes to combine |\n\n```tsx\n\u003cUnion\u003e\n  \u003cCube size={10} /\u003e\n  \u003cSphere radius={6} center={[0,0,10]} /\u003e\n\u003c/Union\u003e\n```\n\n#### Hull\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `children` | `React.ReactNode[]` | Shapes to create hull from |\n\n```tsx\n\u003cHull\u003e\n  \u003cCube size={10} /\u003e\n  \u003cSphere radius={6} center={[0,0,10]} /\u003e\n\u003c/Hull\u003e\n```\n\n### Transformations\n\n#### Translate\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `offset` | `[number,number,number]` | Translation in [x,y,z] |\n\n```tsx\n\u003cTranslate offset={[x,y,z]}\u003e\n  \u003cCube size={10} /\u003e\n\u003c/Translate\u003e\n```\n\n#### Rotate\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `angles` | `[number,number,number]` | Rotation angles in radians [x,y,z] |\n\n```tsx\n\u003cRotate angles={[x,y,z]}\u003e\n  \u003cCube size={10} /\u003e\n\u003c/Rotate\u003e\n```\n\n### Extrusions\n\n#### ExtrudeLinear\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `height` | `number` | Extrusion height |\n| `twistAngle` | `number` | Optional twist during extrusion |\n\n```tsx\n\u003cExtrudeLinear height={10}\u003e\n  \u003cPolygon points={[[0,0], [10,0], [5,10]]} /\u003e\n\u003c/ExtrudeLinear\u003e\n```\n\n#### ExtrudeRotate\n\n| Prop | Type | Description |\n|------|------|-------------|\n| `angle` | `number` | Rotation angle in radians |\n| `segments` | `number` | Optional number of segments |\n\n```tsx\n\u003cExtrudeRotate angle={Math.PI * 2}\u003e\n  \u003cPolygon points={[[0,0], [10,0], [5,10]]} /\u003e\n\u003c/ExtrudeRotate\u003e\n```\n\n## Component Props Reference\n\n| Component | Props | Description |\n|-----------|-------|-------------|\n| Cube | `size: number \\| [number,number,number]` | Size in each dimension |\n| Sphere | `radius: number`, `segments?: number` | Radius and detail level |\n| Cylinder | `radius: number`, `height: number` | Basic cylinder dimensions |\n| Torus | `innerRadius: number`, `outerRadius: number`, `segments?: number` | Ring dimensions |\n| ExtrudeLinear | `height: number`, `twistAngle?: number` | Linear extrusion with optional twist |\n| ExtrudeRotate | `angle: number`, `segments?: number` | Rotational sweep |\n| Polygon | `points: [number,number][]` | 2D points array |\n| Translate | `offset: [number,number,number]` | 3D translation |\n| Rotate | `angles: [number,number,number]` | Rotation angles in radians |\n| Hull | `children: React.ReactNode` | Convex hull of children |\n| Union | `children: React.ReactNode` | Boolean union of children |\n| Subtract | `children: React.ReactNode` | Boolean subtraction |\n\n## Why?\n![Example Circuit](https://raw.githubusercontent.com/tscircuit/docs/cc50157788914f060f0169b92b994deff754877b/images/pushbutton-led-circuit/3d.png)\n\nJSCAD allows you to create detailed 3D objects using boolean operations. This\nis how modern CAD tools create precise 3D models. jscad-fiber is used to\ncreate the 3D electronics library for [tscircuit](https://github.com/tscircuit/tscircuit) called\n[jscad-electronics](https://github.com/tscircuit/jscad-electronics)\n## Example Wrapper\n\nThe library includes an `ExampleWrapper` component that provides a convenient way to display both the rendered 3D object and its source code:\n![ExampleWrapper](https://github.com/user-attachments/assets/c3a44096-b26b-4774-ba3f-b34f89e46639)\n```tsx\nimport { ExampleWrapper } from \"jscad-fiber\"\n\nexport default () =\u003e (\n  \u003cExampleWrapper fileName={import.meta.url}\u003e\n    \u003cJsCadView\u003e\n      \u003cSphere radius={10} color=\"orange\" /\u003e\n    \u003c/JsCadView\u003e\n  \u003c/ExampleWrapper\u003e\n)\n```\n\nThis wrapper:\n- Shows the rendered 3D object\n- Provides a \"Show Code\" button that reveals the source code\n- Automatically syntax highlights the code\n- Makes examples more interactive and educational\n\n## Contributing\n\nSee the [`examples` directory](./examples) for more usage examples.\n\nPull requests welcome! Please check existing issues or create a new one to discuss major changes.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftscircuit%2Fjscad-fiber","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftscircuit%2Fjscad-fiber","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftscircuit%2Fjscad-fiber/lists"}