Skip to content

feat(3d): add PcbBoxViewer with PCB texture on box#886

Open
sucloudflare wants to merge 1 commit into
tscircuit:mainfrom
sucloudflare:feat/pcb-box-viewer-texture
Open

feat(3d): add PcbBoxViewer with PCB texture on box#886
sucloudflare wants to merge 1 commit into
tscircuit:mainfrom
sucloudflare:feat/pcb-box-viewer-texture

Conversation

@sucloudflare
Copy link
Copy Markdown

Closes #419

Adds a PcbBoxViewer React component that renders the PCB as a textured 3D box using Three.js.

How it works

  1. Calls convertCircuitJsonToPcbSvg() from circuit-to-svg to render the board layout as SVG
  2. Rasterizes the SVG to PNG via @resvg/resvg-wasm (with SVG data URL fallback if wasm fails)
  3. Applies the PNG as a texture on the top face of a BoxGeometry in Three.js
  4. Board dimensions are derived from the pcb_board element (width/height/thickness)
  5. Slow rotation animation to show the 3D effect

New files

  • src/components/PcbBoxViewer.tsx — the component
  • src/examples/2026/pcb-box-viewer.fixture.tsx — demo fixture

New deps

  • three + @types/three — 3D rendering
  • @resvg/resvg-wasm — SVG → PNG rasterization in the browser

Uses circuit-to-svg to render the board layout as SVG, rasterizes
it with @resvg/resvg-wasm to produce a PNG, then applies it as a
Three.js texture on the top face of a BoxGeometry.

- New: src/components/PcbBoxViewer.tsx
- New: src/examples/2026/pcb-box-viewer.fixture.tsx
- Export added to src/index.tsx
- Deps: three, @types/three, @resvg/resvg-wasm

Closes #419
@vercel
Copy link
Copy Markdown

vercel Bot commented May 25, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
pcb-viewer Ready Ready Preview, Comment May 25, 2026 8:06pm

Request Review

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant