3D Electronic Component Models for JSCAD and tscircuit
Docs · Website · Twitter · discord · Quickstart · Online Playground
jscad-electronics is a library of 3D electronic component models for use with JSCAD and tscircuit. It provides accurate and customizable 3D models for various electronic components, making it easier to create 3D representations of PCBs and electronic assemblies.
Contribution Guide:
- Wide range of electronic component models (e.g., resistors, capacitors, ICs, connectors)
- Customizable dimensions and parameters for each component
- Integration with tscircuit for advanced PCB design capabilities
- Easy-to-use React components for JSCAD integration
Install jscad-electronics using npm:
npm install jscad-electronicsHere's a basic example of how to use jscad-electronics with JSCAD:
import { JsCadView } from "jscad-fiber"
import { SOT233P, ExtrudedPads } from "jscad-electronics"
export default () => {
return (
<JsCadView zAxisUp>
<SOT233P />
<ExtrudedPads footprint="sot23" />
</JsCadView>
)
}This example creates a 3D model of an SOT-23-3P component with extruded pads.
jscad-electronics includes models for various components, including:
- Resistors (0402, 0603, 0805)
- Capacitors
- ICs (DIP, SOIC, TSSOP, QFN, QFP, BGA)
- Diodes (SOD-123)
- Transistors (SOT-23, SOT-563, SOT-723)
- And more!
Check the lib directory for a full list of available components.
Most components accept parameters for customization. For example:
<QFN fullWidth={4} height={0.8} thermalPadSize={2} />Refer to the individual component files for available customization options.
FlexScreen combines a parameterized display with an FPC cable. Screen size
can be supplied directly or derived from a diagonal and aspect ratio, and the
built-in mounting presets place the display above, below, or at a right angle
to the board plane.
import { FlexScreen } from "jscad-electronics"
<FlexScreen
diagonal={50}
aspectRatio="16:9"
orientation="foldedToFaceBelowBoard"
flexCableLength={38}
flexCableWidth={10}
conductorCount={10}
distanceBelowBoard={9}
foldDistanceFromConnector={8}
foldOutset={5}
/>Use sitsFlat when the display and cable continue in the same direction.
foldedToFaceAboveBoard and foldedToFaceBelowBoard create true 180-degree
folds, while foldedToRightAngleAboveBoard and
foldedToRightAngleBelowBoard create 90-degree bends. The downward 180-degree
fold starts on top of the board and turns over its edge.
For 180-degree folds, distanceAboveBoard or distanceBelowBoard sets the
final screen backplane independently of foldDistanceFromConnector and
foldOutset, which control where the loop begins and how far it projects past
the board edge. Every orientation is also available as a boolean shortcut, for
example <FlexScreen sitsFlat /> or <FlexScreen foldsBelowBoard />.
Until tscircuit has a dedicated CAD-model DSL, the same model can be selected through a footprinter string. Each underscore-separated token sets one model property:
<component cadModel="flexscreen_w40mm_h22.5mm_flex60mm_foldsabove_distance20mm_foldstart9mm_outset6mm" />distance is orientation-aware: it becomes distanceAboveBoard with
foldsabove and distanceBelowBoard with foldsbelow. Explicit
distanceabove and distancebelow tokens are also supported. Other useful
tokens include diagonal, ratio16x9, flexwidth, foldsegments,
rightangleabove, rightanglebelow, sitsflat, conductors, and
hideconductors. Unknown tokens throw an error so a typo cannot silently
produce the wrong model. Parsing and validation are provided by
@tscircuit/modelprinter, keeping
the string grammar independent of this JSCAD renderer.
jscad-electronics is designed to work seamlessly with tscircuit. You can use these 3D models in your tscircuit projects to create accurate 3D representations of your PCB designs just by
using the footprint prop
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
If you encounter any problems or have any questions, please open an issue on the GitHub repository.