tscircuit•5w ago

GitHub - tscircuit/3d-viewer: 3d viewer ...

Hi! I have spent the last few days looking deep into the docs and some code of tscircuit, circuitjson, the 3d-viewer, and so on. My first actual goal is to be able to create a series of breakout boards, for example "this is a breakout board for a 2 pin connector, all the way through the same kind of breakout board for a 40 pin connector of a certain type". I suspect that the solution here could be to use scripts to define the math like the size of the PCB, the position of the breakout pads, and the position of the actual connector/ part being showcased, and then the scripts create a unique tscircuit file for each PCB in that "series"/ family.
I've hit some roadblocks, one of which is how to get 3D Models into this.
I see there is a cadModel prop mentioned here, but I don't see how this ties in with an actual tscircuit file I create. https://github.com/tscircuit/3d-viewer?tab=readme-ov-file Can I get some assistance with connecting the dots? Say that kicad has a footprint of what I want, and either it links to a 3D Model (likely .step) or I find and provide it externally. Then, step is no good so I have to convert to OBJ and MTL? Ok, I found https://github.com/ghackenberg/opencascade-tools which lets me convert a STEP to OBJ+MTL with a single terminal command. I am running using the CLI as the docs show with tsci dev What's the missing link between the kicad_mod import and actually mapping a cad model to it and then using all that in a tscircuit file?

GitHub

GitHub - tscircuit/3d-viewer: 3d viewer for printed circuit boards ...

3d viewer for printed circuit boards created using tscircuit - tscircuit/3d-viewer

GitHub

GitHub - ghackenberg/opencascade-tools: Easy-to-use wrapper around ...

Easy-to-use wrapper around Open CASCADE Technology available as command line interface (CLI) and JavaScript/TypeScript applicartion programming interface (API) - ghackenberg/opencascade-tools

40 Replies

Seve•5w ago

CC @Rishabh @shibo hey Ray, this is all good stuff and we'll help you get everything working We can probably configure tscircuit to accept STEP files. We also have a syntax that is not yet fully supported for automatically importing kicad footprints, you would do footprint="kicad:Battery/Battery_CR1225. We can accelerate that effort

Ray KholodovskyOP•5w ago

I appreciate it! I have nothing I’ve written myself yet so as simple to stock example for a starting point please. And happy to address the XY problem by sharing more details about exactly what I want to do, but would love to understand the 3D cad model thing first. Those would both be awesome. Is there something I can do now where I already have the OBJ+MTL conversions done?

Seve•5w ago

For cadModel, typical usage is to link to a CDN. We don't have a way to use local model files right now, but we can look into this

Seve•5w ago

example: https://tscircuit.com/editor?package_id=51cb0ad7-3dea-4727-b035-b15b748bee23&file_path=index.ts

Editor - tscircuit

Design and edit electronic circuits online with tscircuit's powerful web-based editor. Create schematics, PCB layouts, and 3D models with code.

Seve•5w ago

Are all your models coming from kicad? If so, I think we can finish building out the footprint="kicad:*" syntax which would automatically import the models

Ray KholodovskyOP•5w ago

Are all your models coming from kicad?

"it depends" on the situation. In the case of connectors, like all of the JST line, I find that since kicad uses a generator, their footprints (and 3D Models, when available) are much more consistent and that is important to me. I'm trying to "script" this to get deterministic outputs instead of "AI variety" I found the LCSC footprints had a little too much variety, like a 20 pin and 24 pin version of the same family had wildly different silkscreen outlines and so on. Not ideal. I prefer to use KiCad's footprint libraries when possible. 3D Models aren't always in there and have to get those separately, that's annoying but manageable.

Ray KholodovskyOP•5w ago

XY problem, broader context. These are the types of breakout boards being designed. Need to make one for all major components under the sun, eventually. Connectors seem like a fundamental one to solve, cuz it's super scriptable and follows a template. Hence my desire to pull that off.

Ray KholodovskyOP•5w ago

These are all designed in KiCad. The machine pins in the (usually) 4 corners and then the contacts along the edges are all part of a local KiCad library, with STEP models. I've already converted those to OBJ+MTL for this.

Ray KholodovskyOP•5w ago

Here are some examples of connector breakouts from a while ago. Hopefully this gives you the idea and you can see how making hundreds of variants of all of these is prime for scripting.

Seve•5w ago

are you primarily using the CLI? gotcha, ok so there are a couple things that we need to put together, not particularly difficult but could take a couple of days for the community to put it together. * kicad:* footprint loading (CC @Rishabh / me) * local OBJ file import in CLI (CC @shibo ?) * local OBJ file import in tscircuit.com (CC @DOPΣ ?) I can create some associated bounties since this is a user request

Ray KholodovskyOP•5w ago

According to your nomenclature, I believe yes. I think of this as "local nodejs server"

Seve•5w ago

For local obj loading, it would work like this:

import myObjUrl from "./myObj.obj"

export const MyComponent = () => {
  return (
    <chip
      cadModel={{ objUrl: myObjUrl }}
    />
  )
}

import myObjUrl from "./myObj.obj"

export const MyComponent = () => {
  return (
    <chip
      cadModel={{ objUrl: myObjUrl }}
    />
  )
}

(this is the same as how image loading works in vite etc. CC @shibo @DOPΣ )

Ray KholodovskyOP•5w ago

still struggling with getting the syntax correct and everything in the right place so apologies if I'm doing something dumb

Ray KholodovskyOP•5w ago

maybe I need to update to the latest tscircuit (did bun update and reran tsci dev, no change) The syntax error in vscode is

Cannot find module './assets/MachinePin_Medium_Standard.obj' or its corresponding type declarations.

and then

Property 'name' is missing in type '{ cadModel: { objUrl: any; }; }' but required in type 'ChipPropsSU<string>'.ts(2741) index.d.ts(777, 5): 'name' is declared here.

shibo•5w ago

you need to provide a name for the chip, name="U1"

Seve•5w ago

we haven't added support for importing obj yet @Ray Kholodovsky , we'll work on this ASAP

Ray KholodovskyOP•5w ago

Ah, “would work” meaning in the future not today 😂

Seve•5w ago

yea we'll let you know when it works. The only hack you could do today is host it on a server then give a url to the OBJ file on your server e.g. cadModel={{ objUrl: "https://localhost:3000/myfile.obj" }}

Ray KholodovskyOP•4w ago

brb spinning up npx http-server Ok I have the http (not https) server going and I've been trying a bunch of different syntax.
First of all, I see this error in console even without my cadModel added in:

standalone.min.js:12826 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Ray KholodovskyOP•4w ago

Here is the result I keep getting with the cadModel defined

Ray KholodovskyOP•4w ago

export default () => (
  <board width="10mm" height="10mm">
    <chip
    name="U1"
    footprint={
      <footprint>
        <platedhole
          portHints={["4"]}
          pcbX="0mm"
          pcbY="0mm"
          outerDiameter="1.6mm"
          holeDiameter="1.2mm"
          shape="circle"
        />
        </footprint>
    }
    cadModel={{
              objUrl: "http://192.168.1.236:8080/MachinePin_Medium_Standard.obj",
              mtlUrl: "http://192.168.1.236:8080/MachinePin_Medium_Standard.mtl",
            }}
    />



  </board>
)

export default () => (
  <board width="10mm" height="10mm">
    <chip
    name="U1"
    footprint={
      <footprint>
        <platedhole
          portHints={["4"]}
          pcbX="0mm"
          pcbY="0mm"
          outerDiameter="1.6mm"
          holeDiameter="1.2mm"
          shape="circle"
        />
        </footprint>
    }
    cadModel={{
              objUrl: "http://192.168.1.236:8080/MachinePin_Medium_Standard.obj",
              mtlUrl: "http://192.168.1.236:8080/MachinePin_Medium_Standard.mtl",
            }}
    />



  </board>
)

Seve•4w ago

can you download the circuit json and upload it if possible (via the file menu)

Ray KholodovskyOP•4w ago

server seems to be getting the request. excluding mtl doesn't seem to make a difference.

Ray KholodovskyOP•4w ago

Untitled.circuit.jso...

Seve•4w ago

yea this seems like a bug in the 3d viewer or your server isn't serving it properly

Seve•4w ago

yea the circuit json is fine

Seve•4w ago

this is likely the line that's throwing https://github.com/tscircuit/3d-viewer/blob/89881b3f93f69b5756d9812a42410ea8068571f9/src/hooks/use-global-obj-loader.ts#L32

GitHub

3d-viewer/src/hooks/use-global-obj-loader.ts at 89881b3f93f69b5756d...

3d viewer for printed circuit boards created using tscircuit - tscircuit/3d-viewer

Seve•4w ago

can you upload the obj file so we can create a repro

Ray KholodovskyOP•4w ago

May I DM you with it? (I went ahead and DM'd you the problem OBJ and associated MTL)

Seve•4w ago

yes please! Ok Ray, I think looking at these files it may just be an issue in our obj parser. I will also create an issue for this it will be difficult for someone to solve without a reference obj, i can try to generate one using opencascade, but if you have one that can speed up the process I would love to just support step files directly as well, but this is pretty difficult in practice. I think i can probably figure something out but we might not have it until Sat/Sun

Ray KholodovskyOP•4w ago

Ok thanks. I tried with the output of the opencascade converter I linked at the top, and also with a several times larger file I converted on one of the popular conversion websites and they all have the same issue. I think there’s commonality here. Is your concern about being able to publicize the problematic obj in the issue? Let me get back to you in a bit with some other problematic ones.

Seve•4w ago

https://github.com/tscircuit/3d-viewer/issues/454

GitHub

Support OBJ files that come from OpenCASCADE · Issue #454 · tscir...

They typically look like this. Make sure to create an example file /bounty $150

Seve•4w ago

yea basically i just want to give whoever implements this a reference obj otherwise they'll need to generate it (i might end of doing it myself), if you do find one feel free to attach to that issue somehow, or upload to discord and link to the message CC @Abse might like this issue

Abse•4w ago

I would love to

Ray KholodovskyOP•4w ago

Ok I'm diving into this.
Here is what I converted from opencascade, note 65kb:

Contact_v1_opencasca...

Ray KholodovskyOP•4w ago

Now this is from https://convert3d.org/step-to-obj/app note 223kb, but easily attributed to different resolution settings I suspect that opencascade is under the hood of a lot of conversion software, or that this is just attributable to converting from STEP files or something about all of mine. Idk.

STEP TO OBJ Converter

Convert STEP TO OBJ 3D model files

Contact_v1_convert3d...

Ray KholodovskyOP•4w ago

I promise I'm not impatient, this is just me wanting to know what to expect. I saw the PR's got merged in. Then it looks like a build occurred afterwards and we are on tscircuit 0.0.622 I did bun update on my local CLI project and I am on that version now. I still have the same red cube of death as pictured above. So just curious if we need to wait longer for other dependencies like the 3d viewer to get rolled into tscircuit, or if I'm doing something wrong/ not doing something.
Also wrapping up for the day here so no hurry at all.

Seve•4w ago

Yea it can take a second for deps to propagate, @shibo is it live or maybe the fix didn’t work? He’s on cli so maybe runframe needs the update in cli? It’s possible the fix didn’t work

shibo•4w ago

it's working on my local cli atm, I'll pr asap

Ray KholodovskyOP•4w ago

ok no hurry, I'll check back on this stuff monday morning. Thanks!

Gaming

Programming

GitHub - tscircuit/3d-viewer: 3d viewer ...

Did you find this page helpful?