tscircuit now supports a 3d view!
tscircuit now supports a 3d view!
You can now get a realtime 3d preview of your circuit board
Most circuit designers will spend most of their time looking at two views: the Schematic View and the PCB Layout view. These views are by far the most functional, the schematic view gives you the functional diagram of how components are connected, and the PCB Layout represents the physical layers and wires that components are bonded to. So why have a 3d view?
Why have a 3D Viewer?
I wasn’t sure if building a 3D view was the right thing to do because it could be considered mostly cosmetic and non-essential for board designs, here’s how I justified nearly a month of effort:
3D views help discover discrepancies between the copper pads and the physical chip dimensions before your order your board
3D exports can be put into CAD designs for a larger project, for example, if the electronics are mounted to a robotic arm, you can place the board and make sure the mounting holes are aligned
It helps bridge the gap between the more abstract views and the physical reality of your board (and looks like of cool too!)
How do I use it?
Just click the “3D” button inside of tsci dev , that’s it! You should see a preview of your board!
Customizing/Adding 3D Models
There are a lot of ways to specify the model, but it all comes down to setting the cadModel prop. We’re working to automatically generate a model for any chip you use, but sometimes you’ll have to pull a model in manually, especially for non-standard chips.
Specify the OBJ, STL or STEP URL
Most of our internal models are specified like this, we have a component pre-modeled so we just link back to the tscircuit modelcdn. If you have a server hosting models or URLs to models this is the best option.
Use <jscad /> React components to create 3D Models
Sometimes all you want to do is write React, we introduced the <jscad /> tag to allow people to create entire programmatically generated components using the regular React ecosystem.
We’ve already started using this approach to generate chips in our jscad-electronics repo, and it’s pretty likely that most of tscircuit’s components will use React jscad to generate components in the future.
Specify the jscad operations
This is similar to the approach above, but totally in JSON. This can be better for people who are generating models outside of Typescript or prefer a more data approach. For the full spec on the JSON format, check out the jscad-planner repository.
