<Pcb3D /> component

[DrSensor]

why?

<CadViewer /> is good, but you can't swap the renderer, lightning, and so on.
We need to extract the 3d component.

<MyCanvas>
  <CustomCamera />
  <WorldEnvironment />
  <Pcb3D>
    …
  </Pcb3D>
</MyCanvas>

Important

required so there is no duplicate dependencies when tscircuit/circuit-to-svg#166 merged

I'm using 👇 in that PR

bun add github:tscircuit/3d-viewer

so I can use the typescript file directly.

[trivia]
Q: why not using bun patch command?
A: patching the package doesn't work because the ./src/**.ts is missing, it only have ./dist/*.js

---

Change of plan

starting v0.1¹²

• rewrite <Pcb3D> as class Pcb3D extends Object3D
  • constructor(circuitJSON, options)
• dispatch event on: hover/unhover and select/unselect; cad component (use raycast)
  • event dispatch can be disabled via options or .hoverComponent = false

nice to have:

• perf: instancing multiple mesh that has same footprint/cadModel

avoid:

• don't implement tooltip and highlight on hover
• don't store soup/circuitJSON as property, if it's unavoidable then set them to null after doing the transformation of circuit.json->three.js.

Footnotes

1. Major Issues with SVG Rendering #155 ↩

2. vanilla.js version #149 ↩

[seveibar]

Yes that's a good idea, we could have CadViewer be a sort of pre-packaged version with Camera etc. and create a Pcb3D component?

[DrSensor]

exactly

[DrSensor]

@ShiboSoftwareDev or @seveibar, do you still remember why you need this?

3d-viewer/src/hooks/use-stls-from-geom.ts

Lines 5 to 14 in 51848a0

	function blobToBase64Url(blob: Blob): Promise<string> {
	return new Promise((resolve, reject) => {
	const reader = new FileReader()
	reader.onload = () => {
	resolve(reader.result as string)
	}
	reader.onerror = reject
	reader.readAsDataURL(blob)
	})
	}

3d-viewer/src/hooks/use-stls-from-geom.ts

Lines 35 to 37 in 51848a0

	const blobData = new Blob(rawData)
	const stlUrl = await blobToBase64Url(blobData)
	return { stlUrl, color: g.color! }

I'm thinking it should be refactored to be sync instead of async 🤔
see: https://github.com/tscircuit/circuit-to-svg/pull/166/files#diff-0a0a0fcd88aabe21132caeaf2bbf993e67309ddc6514a6d0e5194d0b857a9988

[seveibar]

oh interesting, my guess is we were using stls for some models, but I can't find any snippets where we use stls currently.

It would appear as model_stl_url in cad_component

This is an example cad_component with an obj URL (this is more common for jlcpcb) (source snippet)

{
  "type": "cad_component",
  "cad_component_id": "cad_component_0",
  "position": {
    "x": -5.1514348342607263e-14,
    "y": 0,
    "z": 0.7
  },
  "rotation": {
    "x": 0,
    "y": 0,
    "z": 0
  },
  "pcb_component_id": "pcb_component_0",
  "source_component_id": "source_component_0",
  "model_obj_url": "https://modelcdn.tscircuit.com/easyeda_models/download?uuid=07c2e528ec9a4008b33211831b7000e1&pn=C7203003&cachebust_origin=https%3A%2F%2Ftscircuit.com"
}

[seveibar]

Oh actually I'm remembering something... I think I had some crazy hack with jscad-fiber objects where I converted them to STL and back- sorry my memory isn't super great on the specifics of this code base atm haha but i think you haven't broken anything regarding jscad-fiber if this story still works and puts a random cube on a pcb 😁 https://tscircuit-3d-viewer.vercel.app/?path=/story/cadcomponentwithjscadplan--default