feat added texture support

package.json

@@ -29,39 +29,40 @@
   "dependencies": {
     "@jscad/regl-renderer": "^2.6.12",
     "@jscad/stl-serializer": "^2.1.20",
+    "@resvg/resvg-wasm": "^2.6.2",
     "three": "^0.165.0",
     "three-stdlib": "^2.36.0",
     "troika-three-text": "^0.52.4"
   },
   "peerDependencies": {
-    "zod": "3",
+    "@tscircuit/circuit-json-util": "*",
+    "@tscircuit/core": "*",
     "react": "19.1.0",
     "react-dom": "19.1.0",
-    "@tscircuit/core": "*",
-    "@tscircuit/circuit-json-util": "*"
+    "zod": "3"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.1.4",
     "@chromatic-com/storybook": "^1.9.0",
     "@jscad/modeling": "^2.12.5",
     "@storybook/blocks": "9.0.0-alpha.17",
     "@storybook/react-vite": "^9.1.5",
+    "@tscircuit/capacity-autorouter": "^0.0.131",
+    "@tscircuit/checks": "^0.0.85",
     "@tscircuit/circuit-json-util": "^0.0.72",
     "@tscircuit/core": "^0.0.787",
-    "@tscircuit/props": "^0.0.364",
-    "@tscircuit/checks": "^0.0.85",
     "@tscircuit/math-utils": "^0.0.27",
-    "@tscircuit/capacity-autorouter": "^0.0.131",
-    "calculate-packing": "^0.0.48",
+    "@tscircuit/props": "^0.0.364",
     "@types/jsdom": "^21.1.7",
     "@types/react": "19",
     "@types/react-dom": "19",
     "@types/three": "^0.165.0",
     "@vitejs/plugin-react": "^4.3.4",
     "bun-match-svg": "^0.0.9",
     "bun-types": "1.2.1",
+    "calculate-packing": "^0.0.48",
     "circuit-json": "0.0.279",
-    "circuit-to-svg": "^0.0.179",
+    "circuit-to-svg": "^0.0.252",
     "debug": "^4.4.0",
     "jscad-electronics": "^0.0.48",
     "jscad-planner": "^0.0.13",

src/CadViewerJscad.tsx

@@ -11,6 +11,7 @@ import type { CameraController } from "./hooks/useCameraController"
 import { useConvertChildrenToCircuitJson } from "./hooks/use-convert-children-to-soup"
 import { useStlsFromGeom } from "./hooks/use-stls-from-geom"
 import { useBoardGeomBuilder } from "./hooks/useBoardGeomBuilder"
+import { useCircuitTexture } from "./hooks/useCircuitTexture"
 import { Error3d } from "./three-components/Error3d"
 import { FootprinterModel } from "./three-components/FootprinterModel"
 import { JscadModel } from "./three-components/JscadModel"
@@ -57,6 +58,9 @@ export const CadViewerJscad = forwardRef<
     // Use the new hook to manage board geometry building
     const boardGeom = useBoardGeomBuilder(internalCircuitJson)
 
+    // Generate texture for the board
+    const boardTexture = useCircuitTexture(internalCircuitJson, true)
+
     const initialCameraPosition = useMemo(() => {
       if (!internalCircuitJson) return [5, 5, 5] as const
       try {
@@ -126,6 +130,9 @@ export const CadViewerJscad = forwardRef<
             color={color}
             opacity={index === 0 ? 0.95 : 1}
             layerType={layerType}
+            texture={
+              layerType === "board" ? (boardTexture ?? undefined) : undefined
+            }
           />
         ))}
         {cad_components.map((cad_component) => (

src/CadViewerManifold.tsx

@@ -230,7 +230,15 @@ try {
     boardData,
   } = useManifoldBoardBuilder(manifoldJSModule, circuitJson)
 
-  const geometryMeshes = useMemo(() => createGeometryMeshes(geoms), [geoms])
+  const [geometryMeshes, setGeometryMeshes] = useState<THREE.Mesh[]>([])
+
+  useEffect(() => {
+    if (geoms) {
+      createGeometryMeshes(geoms, circuitJson, true).then(setGeometryMeshes)
+    } else {
+      setGeometryMeshes([])
+    }
+  }, [geoms, circuitJson])
   const textureMeshes = useMemo(
     () => createTextureMeshes(textures, boardData, pcbThickness),
     [textures, boardData, pcbThickness],

src/convert-circuit-json-to-3d-svg.ts

@@ -107,10 +107,12 @@ export async function convertCircuitJsonTo3dSvg(
         g.color?.[2] ?? 0,
       )
 
-      const material = createBoardMaterial({
+      const material = await createBoardMaterial({
         material: boardData?.material,
         color: baseColor,
         side: THREE.DoubleSide,
+        circuitJson,
+        enableTexture: true,
       })
       const mesh = new THREE.Mesh(geometry, material)
       scene.add(mesh)

src/hooks/useCircuitTexture.ts

@@ -0,0 +1,37 @@
+import { useState, useEffect } from "react"
+import * as THREE from "three"
+import type { AnyCircuitElement } from "circuit-json"
+import { createTopSideTexture } from "../utils/circuit-to-texture"
+
+export function useCircuitTexture(
+  circuitJson: AnyCircuitElement[] | undefined,
+  enabled: boolean = true,
+): THREE.Texture | null {
+  const [texture, setTexture] = useState<THREE.Texture | null>(null)
+  const [isLoading, setIsLoading] = useState(false)
+
+  useEffect(() => {
+    if (!enabled || !circuitJson) {
+      setTexture(null)
+      return
+    }
+
+    setIsLoading(true)
+    createTopSideTexture(circuitJson, {
+      width: 1024,
+      height: 1024,
+      backgroundColor: "#ffffff",
+    })
+      .then((newTexture) => {
+        setTexture(newTexture)
+        setIsLoading(false)
+      })
+      .catch((error) => {
+        console.warn("Failed to create circuit texture:", error)
+        setTexture(null)
+        setIsLoading(false)
+      })
+  }, [circuitJson, enabled])
+
+  return texture
+}

src/three-components/STLModel.tsx

@@ -9,12 +9,14 @@ export function STLModel({
   mtlUrl,
   color,
   opacity = 1,
+  texture,
 }: {
   stlUrl?: string
   stlData?: ArrayBuffer
   color?: any
   mtlUrl?: string
   opacity?: number
+  texture?: THREE.Texture
 }) {
   const { rootObject } = useThree()
   const [geom, setGeom] = useState<THREE.BufferGeometry | null>(null)
@@ -46,9 +48,10 @@ export function STLModel({
         : color,
       transparent: opacity !== 1,
       opacity: opacity,
+      map: texture,
     })
     return new THREE.Mesh(geom, material)
-  }, [geom, color, opacity])
+  }, [geom, color, opacity, texture])
 
   useEffect(() => {
     if (!rootObject || !mesh) return

src/three-components/VisibleSTLModel.tsx

@@ -1,19 +1,22 @@
 import { useLayerVisibility } from "../contexts/LayerVisibilityContext"
 import type { LayerType } from "../hooks/use-stls-from-geom"
 import { STLModel } from "./STLModel"
+import * as THREE from "three"
 
 interface VisibleSTLModelProps {
   stlData: ArrayBuffer
   color: any
   opacity?: number
   layerType?: LayerType
+  texture?: THREE.Texture
 }
 
 export function VisibleSTLModel({
   stlData,
   color,
   opacity = 1,
   layerType,
+  texture,
 }: VisibleSTLModelProps) {
   const { visibility } = useLayerVisibility()
 
@@ -37,5 +40,12 @@ export function VisibleSTLModel({
     return null
   }
 
-  return <STLModel stlData={stlData} color={color} opacity={opacity} />
+  return (
+    <STLModel
+      stlData={stlData}
+      color={color}
+      opacity={opacity}
+      texture={texture}
+    />
+  )
 }