@tscircuit/3d-viewer 0.0.1

package/src/plated-hole-board.json

@@ -0,0 +1,213 @@
+[
+  {
+    "type": "source_component",
+    "source_component_id": "simple_resistor_0",
+    "name": "R1",
+    "supplier_part_numbers": {},
+    "ftype": "simple_resistor",
+    "resistance": "10kohm"
+  },
+  {
+    "type": "schematic_component",
+    "source_component_id": "simple_resistor_0",
+    "schematic_component_id": "schematic_component_simple_resistor_0",
+    "rotation": 0,
+    "size": {
+      "width": 1,
+      "height": 0.3
+    },
+    "center": {
+      "x": 0,
+      "y": 0
+    }
+  },
+  {
+    "type": "source_port",
+    "name": "left",
+    "source_port_id": "source_port_0",
+    "source_component_id": "simple_resistor_0"
+  },
+  {
+    "type": "schematic_port",
+    "schematic_port_id": "schematic_port_0",
+    "source_port_id": "source_port_0",
+    "center": {
+      "x": -0.5,
+      "y": 0
+    },
+    "facing_direction": "left",
+    "schematic_component_id": "schematic_component_simple_resistor_0"
+  },
+  {
+    "type": "pcb_port",
+    "pcb_port_id": "pcb_port_0",
+    "source_port_id": "source_port_0",
+    "pcb_component_id": "pcb_component_simple_resistor_0",
+    "x": 0,
+    "y": 0
+  },
+  {
+    "type": "source_port",
+    "name": "right",
+    "source_port_id": "source_port_1",
+    "source_component_id": "simple_resistor_0"
+  },
+  {
+    "type": "schematic_port",
+    "schematic_port_id": "schematic_port_1",
+    "source_port_id": "source_port_1",
+    "center": {
+      "x": 0.5,
+      "y": 0
+    },
+    "facing_direction": "right",
+    "schematic_component_id": "schematic_component_simple_resistor_0"
+  },
+  {
+    "type": "pcb_port",
+    "pcb_port_id": "pcb_port_1",
+    "source_port_id": "source_port_1",
+    "pcb_component_id": "pcb_component_simple_resistor_0",
+    "x": 0,
+    "y": 0
+  },
+  {
+    "type": "schematic_text",
+    "text": "R1",
+    "schematic_text_id": "schematic_text_0",
+    "schematic_component_id": "schematic_component_simple_resistor_0",
+    "anchor": "left",
+    "position": {
+      "x": -0.2,
+      "y": -0.5
+    },
+    "rotation": 0
+  },
+  {
+    "type": "schematic_text",
+    "text": "10kohm",
+    "schematic_text_id": "schematic_text_1",
+    "schematic_component_id": "schematic_component_simple_resistor_0",
+    "anchor": "left",
+    "position": {
+      "x": -0.2,
+      "y": -0.3
+    },
+    "rotation": 0
+  },
+  {
+    "type": "pcb_component",
+    "source_component_id": "simple_resistor_0",
+    "pcb_component_id": "pcb_component_simple_resistor_0",
+    "layer": "top",
+    "center": {
+      "x": 0,
+      "y": 0
+    },
+    "rotation": 0,
+    "width": 4.2,
+    "height": 1.2
+  },
+  {
+    "type": "pcb_plated_hole",
+    "x": -1.5,
+    "y": 0,
+    "layers": [
+      "top",
+      "bottom"
+    ],
+    "hole_diameter": 1,
+    "outer_diameter": 1.2,
+    "port_hints": [
+      "1"
+    ]
+  },
+  {
+    "type": "pcb_plated_hole",
+    "x": 1.5,
+    "y": 0,
+    "layers": [
+      "top",
+      "bottom"
+    ],
+    "hole_diameter": 1,
+    "outer_diameter": 1.2,
+    "port_hints": [
+      "2"
+    ]
+  },
+  {
+    "type": "pcb_silkscreen_path",
+    "layer": "top",
+    "pcb_component_id": "pcb_component_simple_resistor_0",
+    "pcb_silkscreen_path_id": "pcb_silkscreen_path_0",
+    "route": [
+      {
+        "x": -0.7,
+        "y": -0.8
+      },
+      {
+        "x": -0.7,
+        "y": 0.8
+      },
+      {
+        "x": -0.2333333333333333,
+        "y": 0.8
+      },
+      {
+        "x": -0.2155718909193002,
+        "y": 0.7107071991148124
+      },
+      {
+        "x": -0.16499158227686106,
+        "y": 0.635008417723139
+      },
+      {
+        "x": -0.0892928008851876,
+        "y": 0.5844281090806999
+      },
+      {
+        "x": 1.4287545990052454e-17,
+        "y": 0.5666666666666668
+      },
+      {
+        "x": 0.08929280088518761,
+        "y": 0.5844281090806999
+      },
+      {
+        "x": 0.1649915822768611,
+        "y": 0.635008417723139
+      },
+      {
+        "x": 0.2155718909193002,
+        "y": 0.7107071991148124
+      },
+      {
+        "x": 0.2333333333333333,
+        "y": 0.8
+      },
+      {
+        "x": 0.7,
+        "y": 0.8
+      },
+      {
+        "x": 0.7,
+        "y": -0.8
+      },
+      {
+        "x": -0.7,
+        "y": -0.8
+      }
+    ],
+    "stroke_width": 0.1
+  },
+  {
+    "type": "pcb_board",
+    "center": {
+      "x": 0,
+      "y": 0
+    },
+    "width": 5,
+    "height": 5
+  }
+]

package/src/soup-to-3d/index.ts

@@ -0,0 +1,162 @@
+import type { Geom3 } from "@jscad/modeling/src/geometries/types"
+import type { AnySoupElement, PCBPlatedHole } from "@tscircuit/soup"
+import { su } from "@tscircuit/soup-util"
+import { translate } from "@jscad/modeling/src/operations/transforms"
+import { cuboid, cylinder, line } from "@jscad/modeling/src/primitives"
+import { colorize } from "@jscad/modeling/src/colors"
+import { subtract } from "@jscad/modeling/src/operations/booleans"
+import { platedHole } from "../geoms/plated-hole"
+import { M, colors } from "../geoms/constants"
+import { extrudeLinear } from "@jscad/modeling/src/operations/extrusions"
+import { expand } from "@jscad/modeling/src/operations/expansions"
+
+export const createBoardGeomFromSoup = (soup: AnySoupElement[]): Geom3[] => {
+  const board = su(soup).pcb_board.list()[0]
+  if (!board) {
+    throw new Error("No pcb_board found")
+  }
+
+  const plated_holes = su(soup).pcb_plated_hole.list()
+  const pads = su(soup).pcb_smtpad.list()
+  const traces = su(soup).pcb_trace.list()
+  const pcb_vias = su(soup).pcb_via.list()
+
+  // PCB Board
+  let boardGeom = cuboid({ size: [board.width, board.height, 1.2] })
+
+  const platedHoleGeoms: Geom3[] = []
+  const padGeoms: Geom3[] = []
+  const traceGeoms: Geom3[] = []
+  const ctx = {
+    pcbThickness: 1.2,
+  }
+
+  const addPlatedHole = (plated_hole: PCBPlatedHole) => {
+    if (!(plated_hole as any).shape) plated_hole.shape = "circle"
+    if (plated_hole.shape === "circle") {
+      const cyGeom = cylinder({
+        center: [plated_hole.x, plated_hole.y, 0],
+        radius: plated_hole.hole_diameter / 2 + M,
+      })
+      boardGeom = subtract(boardGeom, cyGeom)
+
+      const platedHoleGeom = platedHole(plated_hole, ctx)
+      platedHoleGeoms.push(platedHoleGeom)
+    }
+  }
+
+  for (const plated_hole of plated_holes) {
+    addPlatedHole(plated_hole)
+  }
+
+  for (const pad of pads) {
+    if (pad.shape === "rect") {
+      const padGeom = colorize(
+        colors.copper,
+        cuboid({
+          center: [pad.x, pad.y, 1.2 / 2 + M],
+          size: [pad.width, pad.height, M],
+        })
+      )
+      padGeoms.push(padGeom)
+    } else if (pad.shape === "circle") {
+      const padGeom = colorize(
+        colors.copper,
+        cylinder({
+          center: [pad.x, pad.y, 1.2 / 2 + M],
+          radius: pad.radius,
+          height: M,
+        })
+      )
+      padGeoms.push(padGeom)
+    }
+  }
+
+  for (const { route: mixedRoute } of traces) {
+    const subRoutes = mixedRoute.reduce(
+      (c, p) => {
+        // @ts-ignore
+        const lastLayer = c.current?.[c.current.length - 1]?.layer
+        if (
+          p.route_type === "via" ||
+          (p.route_type === "wire" && p.layer !== lastLayer)
+        ) {
+          if (c.current.length > 2) {
+            c.allPrev.push(c.current)
+          }
+          c.current = p.route_type === "wire" ? [p] : []
+          return c
+        }
+        c.current.push(p)
+        return c
+      },
+      {
+        current: [] as typeof mixedRoute,
+        allPrev: [] as Array<typeof mixedRoute>,
+      }
+    )
+    for (const route of subRoutes.allPrev.concat([subRoutes.current])) {
+      // TODO break into segments based on layers
+      const linePath = line(route.map((p) => [p.x, p.y]))
+
+      const layer = route[0]!.route_type === "wire" ? route[0]!.layer : "top"
+      const layerSign = layer === "top" ? 1 : -1
+      // traceGeoms.push(traceGeom)
+      let traceGeom = translate(
+        [0, 0, (layerSign * 1.2) / 2],
+        extrudeLinear(
+          { height: M * layerSign },
+          expand({ delta: 0.1, corners: "edge" }, linePath)
+        )
+      )
+
+      // HACK: Subtract all vias from every trace- this mostly is because the
+      // vias aren't inside the route- we should probably pre-filter to make sure
+      // that vias are only near the route
+      for (const via of pcb_vias) {
+        traceGeom = subtract(
+          traceGeom,
+          cylinder({
+            center: [via.x, via.y, 0],
+            radius: via.outer_diameter / 2,
+            height: 5,
+          })
+        )
+      }
+
+      traceGeom = colorize(colors.fr4GreenSolderWithMask, traceGeom)
+
+      traceGeoms.push(traceGeom)
+    }
+    for (const via of mixedRoute.filter((p) => p.route_type === "via")) {
+      if (via.route_type !== "via") continue // TODO remove when ts is smart
+
+      addPlatedHole({
+        x: via.x,
+        y: via.y,
+        hole_diameter: 0.8,
+        outer_diameter: 1.6,
+        shape: "circle",
+        layers: ["top", "bottom"],
+        type: "pcb_plated_hole",
+      })
+    }
+  }
+
+  for (const via of pcb_vias) {
+    addPlatedHole({
+      x: via.x,
+      y: via.y,
+      hole_diameter: via.hole_diameter,
+      outer_diameter: via.outer_diameter,
+      shape: "circle",
+      layers: ["top", "bottom"],
+      type: "pcb_plated_hole",
+    })
+  }
+
+  // Colorize to a PCB green color: #05A32E
+  boardGeom = colorize(colors.fr4Green, boardGeom)
+
+  return [boardGeom, ...platedHoleGeoms, ...padGeoms, ...traceGeoms]
+}

package/src/themes.ts

@@ -0,0 +1,7 @@
+export const light = {
+  name: "Light",
+  color: [0, 0.6, 1, 1],
+  bg: [0.95, 0.95, 0.95, 1],
+  grid1: [0, 0, 0, 0.2],
+  grid2: [0, 0, 1, 0.1],
+}

package/src/three-components/GeomModel.tsx

@@ -0,0 +1,13 @@
+import type { Geom3 } from "@jscad/modeling/src/geometries/types"
+
+export const GeomModel = ({ geom }: { geom: Geom3[] | Geom3 }) => {
+  if (!Array.isArray(geom)) {
+    geom = [geom]
+  }
+
+  // TODO useGeomToStl
+
+  // TODO STLModel
+
+  return null
+}

package/src/three-components/MixedStlModel.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from "react"
+import { Euler, Vector3 } from "three"
+import { MTLLoader, OBJLoader } from "three-stdlib"
+
+export function MixedStlModel({
+  url,
+  position,
+  rotation,
+}: {
+  url: string
+  position?: Vector3 | [number, number, number]
+  rotation?: Euler | [number, number, number]
+}) {
+  // const group = useLoader(OBJLoader, url)
+  // const materials = useLoader(MTLLoader, url)
+  // const obj = useLoader(OBJLoader, url)
+
+  const [obj, setObj] = useState<any | null>(null)
+  useEffect(() => {
+    async function loadUrlContent() {
+      const response = await fetch(url)
+      const text = await response.text()
+
+      // Extract all the sections of the file that have newmtl...endmtl to
+      // separate into mtlContent and objContent
+
+      const mtlContent = text
+        .match(/newmtl[\s\S]*?endmtl/g)
+        ?.join("\n")!
+        .replace(/d 0\./g, "d 1.")!
+      const objContent = text.replace(/newmtl[\s\S]*?endmtl/g, "")
+
+      const mtlLoader = new MTLLoader()
+      mtlLoader.setMaterialOptions({
+        invertTrProperty: true,
+      })
+      const materials = mtlLoader.parse(
+        // Grayscale the colors, for some reason everything from JLCPCB is
+        // a bit red, it doesn't look right. The grayscale version looks OK,
+        // it's a HACK because we only take the second color rather than
+        // averaging the colors
+        mtlContent.replace(
+          /Kd\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)/g,
+          "Kd $2 $2 $2"
+        ),
+        "test.mtl"
+      )
+
+      const objLoader = new OBJLoader()
+      objLoader.setMaterials(materials)
+      setObj(objLoader.parse(objContent))
+    }
+    loadUrlContent()
+  }, [url])
+
+  return (
+    <group rotation={rotation} position={position}>
+      {obj && <primitive object={obj} />}
+    </group>
+  )
+}

package/src/three-components/STLModel.tsx

@@ -0,0 +1,33 @@
+import { useLoader } from "@react-three/fiber"
+import { useRef } from "react"
+import * as THREE from "three"
+import { MTLLoader, OBJLoader, STLLoader } from "three-stdlib"
+
+export function STLModel({
+  stlUrl,
+  mtlUrl,
+  color,
+  opacity = 1,
+}: {
+  stlUrl: string
+  color?: any
+  mtlUrl?: string
+  opacity?: number
+}) {
+  const geom = useLoader(STLLoader, stlUrl)
+  const mesh = useRef<THREE.Mesh>()
+
+  // TODO handle mtl url
+
+  return (
+    <mesh ref={mesh as any}>
+      <primitive object={geom} attach="geometry" />
+      <meshStandardMaterial
+        color={color}
+        transparent={opacity !== 1}
+        opacity={opacity}
+      />
+      {/* <Outlines thickness={0.05} color="black" opacity={0.25} /> */}
+    </mesh>
+  )
+}

package/src/three-components/cube-with-labeled-sides.tsx

@@ -0,0 +1,116 @@
+import React, { useRef } from "react"
+import { Canvas, useFrame } from "@react-three/fiber"
+import { OrbitControls, Text } from "@react-three/drei"
+import * as THREE from "three"
+
+declare global {
+  interface Window {
+    TSCI_MAIN_CAMERA_ROTATION: THREE.Euler
+  }
+}
+window.TSCI_MAIN_CAMERA_ROTATION = new THREE.Euler(0, 0, 0)
+
+function computePointInFront(rotationVector, distance) {
+  // Create a quaternion from the rotation vector
+  const quaternion = new THREE.Quaternion().setFromEuler(
+    new THREE.Euler(rotationVector.x, rotationVector.y, rotationVector.z)
+  )
+
+  // Create a vector pointing forward (along the negative z-axis)
+  const forwardVector = new THREE.Vector3(0, 0, 1)
+
+  // Apply the rotation to the forward vector
+  forwardVector.applyQuaternion(quaternion)
+
+  // Scale the rotated vector by the distance
+  const result = forwardVector.multiplyScalar(distance)
+
+  return result
+}
+
+export const CubeWithLabeledSides = ({}: any) => {
+  const ref = useRef<THREE.Mesh>()
+  const rotationTrackingRef = useRef({ lastRotation: new THREE.Euler() })
+  useFrame((state, delta) => {
+    if (!ref.current) return
+
+    const mainRot = window.TSCI_MAIN_CAMERA_ROTATION
+
+    // Use window.TSCI_CAMERA_ROTATION to compute the position of the camera
+    const cameraPosition = computePointInFront(mainRot, 2)
+
+    state.camera.position.copy(cameraPosition)
+    state.camera.lookAt(0, 0, 0)
+  })
+  return (
+    <mesh ref={ref as any} rotation={[Math.PI / 2, 0, 0]}>
+      <boxGeometry args={[1, 1, 1]} />
+      <meshStandardMaterial color="white" />
+      <Text position={[0, 0, 0.51]} fontSize={0.25} color="black">
+        Front
+      </Text>
+      <Text
+        position={[0, 0, -0.51]}
+        fontSize={0.25}
+        color="black"
+        rotation={[0, Math.PI, 0]}
+      >
+        Back
+      </Text>
+      <Text
+        position={[0.51, 0, 0]}
+        fontSize={0.25}
+        color="black"
+        rotation={[0, Math.PI / 2, 0]}
+      >
+        Right
+      </Text>
+      <Text
+        position={[-0.51, 0, 0]}
+        fontSize={0.25}
+        color="black"
+        rotation={[0, -Math.PI / 2, 0]}
+      >
+        Left
+      </Text>
+      <Text
+        position={[0, 0.51, 0]}
+        fontSize={0.25}
+        color="black"
+        rotation={[-Math.PI / 2, 0, 0]}
+      >
+        Top
+      </Text>
+      <Text
+        position={[0, -0.51, 0]}
+        fontSize={0.25}
+        color="black"
+        rotation={[Math.PI / 2, 0, 0]}
+      >
+        Bottom
+      </Text>
+      <lineSegments
+        args={[new THREE.EdgesGeometry(new THREE.BoxGeometry(1, 1, 1))]}
+        material={
+          new THREE.LineBasicMaterial({
+            color: 0x000000,
+            linewidth: 2,
+          })
+        }
+      />
+    </mesh>
+  )
+}
+
+// const LabeledCubeScene = () => {
+//   return (
+//     <Canvas camera={{ position: [1.5, 1.5, 1.5] }}>
+//       <ambientLight intensity={0.5} />
+//       <pointLight position={[10, 10, 10]} />
+//       <LabeledCube />
+//       <OrbitControls />
+//     </Canvas>
+//   )
+// }
+
+// export default LabeledCubeScene

package/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/stories/Simple.stories.tsx

@@ -0,0 +1,10 @@
+import { fn } from "@storybook/test"
+import { CadViewer } from "src/CadViewer"
+import bugsPadsAndTracesSoup from "./assets/soic-with-traces.json"
+
+export const Default = () => <CadViewer soup={bugsPadsAndTracesSoup as any} />
+
+export default {
+  title: "Simple",
+  component: Default,
+}